New slideshow widget linking images

Hello, I am excited to use the slideshow for the first time now.
I have an issue, I want to link each image to an internal page inside the website. How can I do this if the link element points to the thumbnail. I am not using the thumbnails by the way.
Thanks
here is my code, well is the standard code I guess that everybody has:
<ul id="ImageSlideShow" title="">
    <li><a href="image_press/slideshow_SIMPSON_GALLERIES.jpg" title="White Orchids"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="photos-1.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-10.jpg" title="Sand"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="photos-10.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-11.jpg" title="Tree"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="photos-11.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-12.jpg" title="Canon"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="photos-12.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-13.jpg" title="Door"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="photos-13.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-14.jpg" title="Flowers at the Palace of Fine Arts"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-14.jpg" alt="photos-14.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-15.jpg" title="Palace of Fine Arts"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-15.jpg" alt="photos-15.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-2.jpg" title="Orchid Close Up"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-2.jpg" alt="photos-2.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-3.jpg" title="Dirt Road"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-3.jpg" alt="photos-3.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-4.jpg" title="Fence Post"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-4.jpg" alt="photos-4.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-5.jpg" title="Portrait of a Horse"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-5.jpg" alt="photos-5.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-6.jpg" title="Brown Horse"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-6.jpg" alt="photos-6.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-7.jpg" title="Spotted Horse Head"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-7.jpg" alt="photos-7.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-8.jpg" title="Spotted Horses"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-8.jpg" alt="photos-8.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-9.jpg" title="Lone Horse"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-9.jpg" alt="photos-9.jpg" /></a></li>
</ul>

Scott,
I have the same problem, I would like to link the large image in the slideshow to a web page. Basically, when the someone clicks on the large image it should go to a web page. I was trying to understand your comment, but did not fully understand. Can you explain futher or suggest how the code would look like with an activated link. Here is my code that I interrupt, please let me know what you would do:
Thanks in advance!
<div class="container">
<div class="content">
    <ul id="ImageSlideShow" title="Donald Booth Photography">
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-1.jpg" title="White Orchids"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="photos-1.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-10.jpg" title="Sand"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="photos-10.jpg" border="0" onclick="MM_goToURL('parent','#');return document.MM_returnValue" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-11.jpg" title="Tree"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="photos-11.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-12.jpg" title="Canon"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="photos-12.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-13.jpg" title="Door"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="photos-13.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-14.jpg" title="Flowers at the Palace of Fine Arts"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-14.jpg" alt="photos-14.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-15.jpg" title="Palace of Fine Arts"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-15.jpg" alt="photos-15.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-2.jpg" title="Orchid Close Up"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-2.jpg" alt="photos-2.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-3.jpg" title="Dirt Road"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-3.jpg" alt="photos-3.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-4.jpg" title="Fence Post"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-4.jpg" alt="photos-4.jpg" /></a></li>
    </ul>
    <script type="text/javascript">
// BeginOAWidget_Instance_2141543: #ImageSlideShow
var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {
    widgetID: "ImageSlideShow",
    widgetClass: "BasicSlideShowFS",
    injectionType: "replace",
    autoPlay: true,
    displayInterval: 8000,
    transitionDuration: 2000,
    componentOrder: ["name", "title", "view", "controls", "links"],
    sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },
    plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin, Spry.Widget.ImageSlideShow.TitleSliderPlugin, Spry.Widget.ImageSlideShow.PanAndZoomPlugin ],
    TFSP: { pageIncrement: 8, wraparound: true }
// EndOAWidget_Instance_2141543
    </script>
</div>
</div>
</body>
</html>

Similar Messages

New slideshow widget how to link images

Hello,
I installed the slideshow widget, how do I link the images to other pages?

It is unfortunately currently not supported to merge multiple accounts (Transfer content, points, etc.). You could request via mail to [email protected] http://scn.sap.com/docs/DOC-18521

New Collection from links/images in current document - is this possible?

Our team includes PC and Mac users.
We have CS5.5 - InDesign v7.5.3
I'm currently running Win7
This might be a post for the Bridge forum, but since we want the workflow to begin with InDesign...
I did try searching here, there, and within Exchange forums.
What we'd like to be able to do is open a document in InDesign that has dozens of links, and by some magical autmotaed (or even manual) process, be able to create a collection - not a snippet - of the linked files. I've tried several ways to get this to happen both from within ID and Bridge, no luck.
Is there a way?
Maybe a script?
-Rick

Thanks for the quick reply. I don't want to package or export linked images using the "Copy Links to..." option from the links panel. What either of those options would do would in fact create copies of the images.
Instead, I want to maintain their original locations, maintain links, etc..
So, by the term "collection" in my question what I meant to say is a Bridge Collection (as seen in Bridge or in the Mini Bridge panel). I want to generate such a collection from the items I choose that already are placed within an InDesign document. I've attempted selecting from the Links Panel in ID, selecting from the document itself and dragging in to a pre-existing collection, but this seems to only result in an InDesign Snippet file. I checked contextual menus and panel menus. I also tried the drag operation with various modifier keys just hoping. No luck.
I'm thinking there should be a script or plugin for this... but alas have not found it.
-Rick

Slideshow with linked images

Hi,
I read on a post from about a year ago that someone else was having problems getting the images in his slide show to be linked to other web sites or other pages. The solution for the linking was the following onclick javascript code:
<img src="pic1.jpg" onclick="window.location = 'http://www.google.com';" />
That is working great. But my last minor issue is that I'm not getting the "pointy finger" indicator when I hover over an image, showing that it links to somewhere. The original discussion said to add this to the css:
#slideshow img {
     cursor:pointer;
But I'm not sure which css to add this to. jquery-latest.min.js? jquery.cycle2.min.js? And where? at the very end, or....?
Thanks for any help you can give. I'm obviously not a javascript programmer so I'm just trying to tape and paste this solution together.
Gail

Nancy,
As I mentioned, your solution didn't work for me, partly because I didn't fully understand the instructions. I'll go through my questions step by step. See my comments in bold below.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with Cycle2 </title>
OK, I've done this. Essentially created a new template with the above code.


<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
I did that. Added it to the template I created above.


<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
</head>
On this step, do you mean the same template page I created above, or something else? If it's the same template, then this script comes right after <script src="http://code.jquery.com/jquery-latest.min.js"> </script> , correct?
In these steps below, I assume you mean I create a new HTML page based on the template I created above?
<body>


<div class="slideshow"
    data-cycle-pause-on-hover='true',
    data-cycle-timeout='2000'
    data-cycle-slides="> a"
>

<a href="http://www.iongeo.com"><img src="images/ION_GeoVentures_logo_sm.jpg" alt="ION logo"/></a>
<a href="http://www.hess.com"> <img src="images/Hess-logo_sm.jpg"/></a>
<a href="http://www.shell.com"><img src="images/Shell-logo-sm.jpg"/></a>
<a href="http://www.chevron.com"><img src="images/Chevron-logo_sm.jpg"/></a>
<a href="http://www.halliburton.com"><img src="images/Halliburton-logo_sm.jpg"/></a>
<a href="http://www.statoil.com"><img src="images/Statoil_logo_sm.jpg"/></a>
<a href="http://www.slb.com"><img src="images/Schlumberger-logo_sm.jpg"/></a>

</div>
</body>
</html>
Again, I apologize for being dense!
Jon: I did go to the validator page, and removed the extra <head> and <body> and <style> tags.
Gail

How do I set the default Hero image in a Muse slideshow widget when using Free Form Thumbnails?

Hello,
I am trying to find out how to set the default Hero image when using a Muse slideshow widget and in the Layout section I have the "Free Form Thumbnails"
box checked.
In other words, when the page loads I want to define which image displays as the first Hero image.
If I do not select the "Free Form Thumbnails" option, the top left Thumbnail image always displays first. This is fine.
But when I select the Free Form Thumbnails" checkbox I don't know how to define which image shows first as the Hero image.
I have a short video at this link where I illustrate the question:
http://amson.org/misc/default-hero-image-1.mp4
I have added a WMV video file at the link below:
http://amson.org/misc/default-hero-image-1.wmv
Okay… I think I've worked out how to do it!
[1] First have the "Free Form Thumbnails" box UNCHECKED.
[2] Organize the Thumbnails and place the image that you want to be the first Hero image when the page loads in the top left corner of the Thumbnails group.
[3] When you "Preview Site In Browser" the Thumbnail image in the top left corner will always display as the first Hero image.
[4] If you want "Free Form Thumbnails" go ahead now and SELECT that checkbox.
[5] Whichever image was in the top left of the Thumbnail group before you checked "Free Form Thumbnails" will still show up as the first Hero image when the page loads, regardless of where that thumbnail image is located within the Thumbnail images group.
Thanks very much.
Chris.

Hi,
The sequence of operation you are doing to set the home page for public users is correct. You are getting the login screen as the "custom page group" selected as "home page" has not been granted to public.
Also, while logging-out, it is normal behaviour to get the screen where it shows the list of partner applications from where user has been logged-out. When you click on "Return" button, you will get to the "home page" set above.
Hope it clarifies the things.
Regards,
Ved

Thumbnail images of Thumbnail Slideshow Widget not releasing Tooltips

I'm running Muse v2.2 Build 6 CL 770942 and had mistakenly assigned a number of tooltips to a number of thumbnail images of a thumbnail slideshow widget. After deleting those tooltips via the contextual menu on selected thumbnails and the "edit image properties" item in that menu, and after re-publishing to my Creative Cloud-hosted non-live site, and after refreshing my page in Safari 6.0.1 (8536.26.14) running OS 10.8.2, the tooltips are still there. This seems to be a bug.

Sachin,
Here's the link to my page: http://van-garde2businesscatalystcom.businesscatalyst.com/ads-2.html
I cleared the cache to no avail.
I tried opening the page in Firefox 15.0.1, and the tooltips not only still appear when I rollover the thumbnails, but all thumbnails, menu links, and heroes are totally off the page to the right!!
Help!!!

Can i create a button that links to the slideshow widget

I am creating a portfolio site for a class. It is a one page site, One of my sections is going to be my "work" section. I want to categorize my work, So I have made buttons that pertain to each category of work. Is there anyway that I can link this to the slideshow widget. When one of the category buttons is clicked I want the slideshow widget to pop up. Is this possible? I can not find a tutorial and I am very new to Muse. Thank you!

Hi,
You can't directly associate a button with a slideshow. However, you can embed slideshow in a tooptip target and add the button to the tooltip trigger as mentioned in this post : Re: How do i create a button which will show new content on same page?
Regards,
Aish

How do you shuffle the image order when creating a new slideshow in apterture 3? i would like to do this automatically when creating a new slideshow. i see how you do it when you just play a slideshow.

how do you shuffle the image order when creating a new slideshow in apterture 3? i would like to do this automatically when creating a new slideshow. i see how you do it with presets when you just play a slideshow, but i don't see an option to randomly shuffle the slide order when you create a new slideshow. i know you can sort it by different fields, but i want it to be random. thanks.

If you want to rearrange images in random order you can try an AppleScript:
retrieve a list of selected images from Aperture
shuffe the list properly
create an album in Aperture and add the images from the list to the album (make sure that the album set to be orederd manually)
Here is a sample script that shuffles the selected images and displays them in random order in Full Screen Mode:
on removeItem(ims, i)
-- remove the item at position "i" from a list ims
          if ims is {} then return {}
          if (length of ims is 1) then return {}
          if i < 2 then return rest of ims
          if (i = length of ims) then return (items 1 thru (i - 1) of ims)
          if i > (length of ims) then return ims -- should be error?
          return (items 1 thru (i - 1) of ims) & (items (i + 1) thru (length of ims) of ims)
end removeItem
on shuffle_items(ims)
-- shuffle the items of the list "ims" randomly
          local numitems, ims_shuffled, nextrest, nextpick, i
          set numitems to length of ims
          if length of ims < 2 then return ims
          set ims_shuffled to {}
          set nextrest to ims
          repeat until nextrest is {}
                    set i to (random number (numitems - 1)) + 1
                    set nextpick to item i of nextrest
                    set beginning of ims_shuffled to nextpick
                    set numitems to numitems - 1
                    set nextrest to removeItem(nextrest, i)
          end repeat
          return ims_shuffled
end shuffle_items
on shuffleIms()
-- retrieve the selected images from Aperture
-- and display them in random order in full screen mode
          local imageSel, shuffled, i
          tell application "Aperture"
activate
                    set imageSel to (get selection)
                    set shuffled to my shuffle_items(imageSel)
                    set fullscreen to true
                    if imageSel is {} then error "Please select some images."
                    repeat with i from 1 to count of shuffled
                              reveal {item i of shuffled}
delay 3 -- chnage that to the time you want
                    end repeat
                    set fullscreen to false
                    return shuffled
          end tell
end shuffleIms
shuffleIms()
Some more code snippets to go from here:
To create an album:
                    tell library 1
                              if not (exists album "shuffledAlbum") then
make new album with properties {name:"shuffledAlbum", image version:shuffled}
                              end if
                    end tell
And to add the images from the shuffled list to the album:
                    repeat with i from 1 to count of shuffled
                              duplicate item i of shuffled to album "shuffledAlbum"
                    end repeat
Regards
Léonie

JQuery - Linking images in a simple slideshow

Hey guys, I am working on creating a very simply image slider that links to different pages of my site. It is all but complete! however, when I wrap my image in "A Href" tags they screw up the transition (Or fade) effect codded into my slideshow. Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<title>Simple jQuery Slideshow from JonRaasch.com</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify
function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    // use this to pull the images in the order they appear in the markup
    var $next = $active.next().length ? $active.next()
        : $('#slideshow IMG:first');
    // uncomment the 3 lines below to pull the images in random order
    // var $sibs = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next = $( $sibs[ rndNum ] );
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
$(function() {
    setInterval( "slideSwitch()", 5000 );
</script>
<style type="text/css">
/*** set the width and height to match your images **/
#slideshow {
    position:relative;
    height:350px;
    width : 610px;
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    // opacity:0.0;
#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
#slideshow IMG.last-active {
    z-index:9;
</style>
</head>


<div id="slideshow">
    <img src="images\missions-slide.jpg" alt="Slideshow Image 1" />
    <img src="images\young-lions-slide.jpg" alt="Slideshow Image 2" />
    <img src="images\welcome-to-icc-slide.jpg" alt="Slideshow Image 3" />
</div>
</body>
</html>
The three images on the botem are to be linked to different pages, and I read on the developers forum (The developer of this code that is) that I need to reference the images as Div's. I just don't know how. Also, I am using DWCS5.
I am fluent in C++, java, C# and old school html, so I understand some of this code, but i don't know the basics enough to be able to know what to do here. Please help! Thanks!

You can look at the javax.swing.ImageIcon class and add that to your JOptionPane...
- MaxxDmg...
- ' How should I know, I just wrote the thing... '

How do I change an image in muse composition news feature widget?

how do I change an image in muse compostion news feature widget?

There are multiple ways to do that.
You can either use File > Place to place an image on the page somewhere and then drag the image inside the widget target container.
Or you can go to Assets panel, go to the image you want to change, right (or command) click on it and choose Relink. Then navigate to the new image and select it to replace the current image.
Hope this helps.
Cheers,
Vikas

Why are some (but not all) of my Muse slideshow widget images rotated differently than when I edited them in Photoshop CC?

I have a few dozen photographs embedded in the slideshow widget. Most of them appear exactly as I edited them in Photoshop, but several appear rotated clockwise 90 or 180 degrees. Does anyone know why this is happening, and ideally, how I can correct this problem? Thank you.

Please share the site url , also refer to this post and check if this helps :
Why are some of my images importing upside down?
Secondly , if you change the fill type then does that makes difference ?
Thanks,
Sanjit

How do i create a linked image slideshow?

I'd like to have asimilar linked image slideshow to the one at the top of this page...
http://www.jdwetherspoon.co.uk/
Any tips would be greatly appreciated thank you!!

jQuery Sliders:
http://basic-slider.com/
http://nivo.dev7studios.com/
http://wowslider.com/
Google will reveal countless others.
Nancy O.

Images rotated when added in slideshow widget

When using a slideshow widget in Muse, why are added images
displayed 90 or 180 degrees from the original image?

Thanks for the quiuck reply - it is really appreciated. Further investigation resulted in discovering that only photos from my iPad are being rotated. Still don't know why. All other photos are OK. The iPad photos took a circuitous route getting to my computer - but don't know why that should matter. Guess I'll have to delve into the HTML code to see if I can find the problem. If not, I may need further help!

Can an image in the slideshow widgets be moved around inside the bounding box as can be in a normal image placed into Muse (double clicking on a placed image gives the functionality to move the image around - as per Indesign functionality)

Can an image in the slideshow widgets be moved around inside the bounding box as can be in a normal image placed into Muse (double clicking on a placed image gives the functionality to move the image around - as per Indesign functionality)

Can an image in the slideshow widgets be moved around inside the bounding box as can be in a normal image placed into Muse (double clicking on a placed image gives the functionality to move the image around - as per Indesign functionality)

Multiple slideshow widgets mix up images

i have tried to use the adobe muse thumbnail slideshow widget on multiple pages of a website, 20 separate pages and counting, but the slideshows are published with images mixed at random across each other. sometimes the images are correct in the project but persist in publishing incorrectly, and i've chcked on different browsers and refreshed and deleted caches and all that. so it seems the problem may be in the publishing??

oops!!! working on the possibility that some of the picture files use the same name!! aaarrrggghhhh

New slideshow widget linking images

Similar Messages

Maybe you are looking for