Page 2 of 2 FirstFirst 12
Results 11 to 19 of 19

Thread: Slideshow with image maps (image maps change with slides)

  1. #11
    Join Date
    Mar 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi,

    Thank you John for your post, it has helped me setup a slideshow easily.

    Can you please tell me how I can link to internal slides of the same slideshow using image maps/hotlinks --ex: jump to slide #7, #1, etc.

    Thanks again!

    James

  2. #12
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    If you set your slideshow up as shown in my post in this thread:

    Quote Originally Posted by jscheuer1 View Post

    Code:
    var mygallery2=new fadeSlideShow({
    	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery . . .
    Then you can use mygallery2.showslide(3) or mygallery2.navigate(2) to jump to the slide represented by that number (0 based index). Using the showslide() method will not cause an automatically rotating slideshow to stop, navigate() will. You may use these as onclick events for link or area tags, ex:

    Code:
    <area shape="rect" coords="7,393,60,415" href="javascript:void(4);" onclick="mygallery2.showslide(3); return false;" alt="Slide 4" />
    or:

    Code:
    <a href="javascript:void(3);" onclick="mygallery2.navigate(2); return false;">Go To Slide 3</a>
    Last edited by jscheuer1; 03-31-2014 at 01:49 PM. Reason: number agreement
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #13
    Join Date
    Mar 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you John!!

  4. #14
    Join Date
    Mar 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    I please have another question, I have a jQuery based drop down menu that's now going behind the slideshow (it should appear on top of it) --how can I make the slideshow appear behind the drop down menu

    Thank you!

  5. #15
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Raise the z-index (in CSS) for the menu to 2000.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #16
    Join Date
    Mar 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you John!!

    Everything works great now, you have made me very happy --I had been looking for a slideshow with hotlinks for navigation because the design was complicated, but with your help everything was piece of cake.

    Thanks again!

  7. #17
    Join Date
    Mar 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    For some reason, the first slide is not always loading instantly when the page is loaded --the first or second slide shows up after a minute or two, or sometimes it just loads properly without any delays

    Please help.

    Thank you!

  8. #18
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    All images take time to load. Sometimes they're cached or the connection is really good, so it takes little or no apparent time. Other times they're not cached and the connection isn't so fast at the moment, then they take a while to load. Not much you can do about that. You can take steps that will help in most cases:

    1) Optimize images for smallest possible byte size (less bytes take less time to load);

    2) If there's another page that folks will be going to first, and likely to stay there long enough for the first image to be preloaded, you can preload it there. An easy way to preload an image on another page is to make it position: absolute; visibility: hidden; and negative left and top its pixel width or more and height or more respectively, ex (say the image is called 'myfirstimage.jpg'):

    HTML Code:
    <img src="myfirstimage.jpg" style="position: absolute; visibility: hidden; left: -30000px; top: -30000px;">
    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    vutaikt (07-24-2014)

  10. #19
    Join Date
    Jul 2014
    Location
    Hai Phong, Viet Nam
    Posts
    8
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    perfect. worked with me thks
    Quote Originally Posted by jscheuer1 View Post
    If you set your slideshow up as shown in my post in this thread:



    Then you can use mygallery2.showslide(3) or mygallery2.navigate(2) to jump to the slide represented by that number (0 based index). Using the showslide() method will not cause an automatically rotating slideshow to stop, navigate() will. You may use these as onclick events for link or area tags, ex:

    Code:
    <area shape="rect" coords="7,393,60,415" href="javascript:void(4);" onclick="mygallery2.showslide(3); return false;" alt="Slide 4" />
    or:

    Code:
    <a href="javascript:void(3);" onclick="mygallery2.navigate(2); return false;">Go To Slide 3</a>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •