I am trying to get colorbox working for a hidden image gallery. The goal is for the user to click on the icon/link and the gallery pops up and a slideshow starts playing of images that were previously hidden. The base javascript library is from:http://www.jacklmoore.com/colorbox/I am able to get the slideshow to show up, however the inline div I hide the pictures in also shows up as an additional item in the slide show. So instead of 3 photos in the slideshow, I get 3 photos and a div with the href links to the three photos.How can I make it so that the div itself is not part of the slide show?Here is my code:\[code\]<html> <head> <link rel="stylesheet" href="http://stackoverflow.com/questions/15819338/colorbox.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://stackoverflow.com/questions/jquery.colorbox.js"></script> <script> $(document).ready(function(){ //need both of these lines $(".group4").colorbox({rel:'group4', slideshow:true}); $(".inline").colorbox({rel:'group4', inline:true, slideshow:true}); }); </script> </head> <body> <p><a class='inline' href="http://stackoverflow.com/questions/15819338/#inline_content">Inline HTML</a></p> <div style='display:none'> <div id='inline_content' style='padding:10px; background:#fff;'> <p><a class="group4" href="http://stackoverflow.com/questions/content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p> <p><a class="group4" href="http://stackoverflow.com/questions/content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p> <p><a class="group4" href="http://stackoverflow.com/questions/content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p> </div> </div> </body></html>\[/code\]
Colorbox inline photo gallery
- Thread starter Lemonadez
- Start date