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.


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


  10. </head>

  12. <body>


  15. <a href="#photo0" data-rel="popup">Open Popup 0 </a>
  16. </br></br>
  17. <a href="#photo1" data-rel="popup">Open Popup 1 </a>

  19. <div id="thepopups">
  20. <div data-role="popup" id ="photo0">
  21. <img src="buttercup.png"/>
  22. </div>
  24. <div data-role="popup" id ="photo1">
  25. <img src="daffodil.jpg"/>
  26. </div>
  27. </div>


  30. </body>
  31. </html>