jQuery lightbox chaining

jQuery lightbox chaining

Hi, 
I have the code below and I want to programmatically reproduce it with jQuery so that it can handle a variable number of photos from Flickr. I want to use jQuery.wrap() to wrap each tag in a link back to the original image on Flickr using method chaining. I want to set a unique ID attribute on each image.  Its value is to be based on a loop counter in the for-each block ( using “ attr() ”).

Then I want to refactor the code to pop open a lightbox style dialog when clicked, i.e. reuse the wrap() method to create both blocks of HTML (the links and the popups).

Any help would be appreciated.


  1. <html>
  2. <head>
  3. <script src="js/jquery-1.11.2.js"></script>
  4. <script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
  5. <link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.css"></script>
  6. <title></title>


  7. </head>

  8. <body>


  9. <a href="#photo0" data-rel="popup">Open Popup 0 </a>
  10. </br></br>
  11. <a href="#photo1" data-rel="popup">Open Popup 1 </a>

  12. <div id="thepopups">
  13. <div data-role="popup" id ="photo0">
  14. <img src="buttercup.png"/>
  15. </div>
  16. <div data-role="popup" id ="photo1">
  17. <img src="daffodil.jpg"/>
  18. </div>
  19. </div>


  20. </body>
  21. </html>