JQuery Tooltip w Images - Tooltip displays a gallery of images not just one

(2 posts) (2 voices)

1. 

   nonprofitpartners
   Member

   The JQuery Tooltip used with Images code shown in the "Modular" theme displays a tooltip of serveral small images but when you click on the tooltip image it only displays the one you clicked on.

   Goal: How would I modify the code (shown below) to display the set in the tooltip ?

   Thank you in advance. Wanting to extend the creative possibilities.
   Sincerely,
   Joe Johnson

   [tooltip sticky = "true" custom_id = "image2" width = "220" position = "bottom" trigger = '<span class="transparent_frame alignleft"><img width="209" height="209" alt="" src="http://themes.mysitemyway.com/elegance/wp-content/themes/elegance/lib/scripts/thumb.php?src=http://themes.mysitemyway.com/elegance/wp-content/uploads/2010/06/sunset.jpg&w=209&h=209&zc=1&q=100"><img class="transparent_border" style="height:199px;width:199px;" src="http://themes.mysitemyway.com/elegance/wp-content/themes/elegance/images/shortcodes/transparent.gif" alt=""></span>']
   
   <img style = "border: 2px solid white; margin-right: 5px; margin-top: 4px;" width = "50" height = "50" src = 'http://themes.mysitemyway.com/elegance/wp-content/uploads/2011/04/flowers.jpg' />
   
   
   <img style = "border: 2px solid white; margin-right: 5px; margin-top: 4px;" width = "50" height = "50" src = 'http://themes.mysitemyway.com/elegance/wp-content/uploads/2011/04/forest.jpg' />
   
   
   <img style = "border: 2px solid white; margin-top: 4px;" width = "50" height = "50" src = 'http://themes.mysitemyway.com/elegance/wp-content/uploads/2011/01/city.jpg' />
   
   [/tooltip]

   Posted 8 months ago #
2. 

   Ruderic
   Support

   Hi,

   So you copied the code used in the live preview of the theme, and it's showing the 3 images in the lightbox, right?

   Let's try modifying it this way:

   [tooltip sticky = "true" custom_id = "image2" width = "220" position = "bottom" trigger = '<span class="transparent_frame alignleft"><img width="209" height="209" alt="" src="http://themes.mysitemyway.com/elegance/wp-content/themes/elegance/lib/scripts/thumb.php?src=http://themes.mysitemyway.com/elegance/wp-content/uploads/2010/06/sunset.jpg&w=209&h=209&zc=1&q=100"><a rel="prettyPhoto" href="http://themes.mysitemyway.com/elegance/wp-content/uploads/2010/06/sunset.jpg"><img class="transparent_border" style="height:199px;width:199px;" src="http://themes.mysitemyway.com/elegance/wp-content/themes/elegance/images/shortcodes/transparent.gif" alt=""></a></span>']
   <a href = "http://themes.mysitemyway.com/elegance/wp-content/uploads/2011/04/flowers.jpg" rel = "prettyPhoto[image-1]">
   <img style = "border: 2px solid white; margin-right: 5px; margin-top: 4px;" width = "50" height = "50" src = 'http://themes.mysitemyway.com/elegance/wp-content/uploads/2011/04/flowers.jpg' />
   </a>
   <a href = "http://themes.mysitemyway.com/elegance/wp-content/uploads/2011/04/forest.jpg" rel = "prettyPhoto[image-2]">
   <img style = "border: 2px solid white; margin-right: 5px; margin-top: 4px;" width = "50" height = "50" src = 'http://themes.mysitemyway.com/elegance/wp-content/uploads/2011/04/forest.jpg' />
   </a>
   <a href = "http://themes.mysitemyway.com/elegance/wp-content/uploads/2011/01/city.jpg" rel = "prettyPhoto[image-3]">
   <img style = "border: 2px solid white; margin-top: 4px;" width = "50" height = "50" src = 'http://themes.mysitemyway.com/elegance/wp-content/uploads/2011/01/city.jpg' />
   </a>
   [/tooltip]

   As you can see, I added a keyword inside brackets to the "prettyPhoto" attribute of the links. By assigning a different keyword to each link, I am explicitly telling the script to generate a different gallery for each one.

   Try that and let us know the results.

   Posted 8 months ago #

RSS feed for this topic

Reply

You must log in to post.