We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Ditto and Lightbox2 with JQuery

    • 25132
    • 129 Posts
    rivendell48 Reply #1, 17 years ago
    Where am I going wrong? I am currently moving an existing website into MODX which included a number of picture galleries that were based on JavaScript and each opened up in new HTML pages. I am using Lightbox2 with JQuery as the standard Lightbox2 did not work for me in IE6 browsers. I am also using all of this in conjunction with Ditto as I need my client to be able to easily add new picture galleries to their site (to create a new gallery, they simply add a new document to the Gallery container after uploading their pictures to the relevant folder, enter a long and a short title and the rest is done for them). We don’t want the use of thumbnails at all - users should only need to click on a link with the Gallery name and the lightbox should come up. All of this is working perfectly fine, except that the lightbox for one gallery doesn’t stop at the end of its own range of pictures but continues on to the next gallery automatically. The various gallery links simply seem to act as shortcuts to the first picture of that specific gallery, but other than that its continuous. What can I do to separate out the various galleries into their own lightboxes without losing my Ditto functionality? Have a look at www.brayyouthchoir.org/modx/index.php?id=36.

    Am quite new to all of this, so any help is appreciated!
      • 4310
      • 2,310 Posts
      bunk58 Reply #2, 17 years ago
      Try adding a title tag to each link within a set, so as to define and limit each set of images loaded into the lightbox e.g.
      <a title="Limerick 2009" href="assets/images/7_Limerick09/pic1.jpg" title="Limerick 2009">Limerick 2009</a>
<a title="Limerick 2009" href="assets/images/7_Limerick09/pic2.jpg" title="Limerick 2009"></a>

      etc. etc.
        • 25132
        • 129 Posts
        rivendell48 Reply #3, 17 years ago
        Hi bunk58

        Thanks for your reply. But I already have a title tag in each link relevant to the specific gallery? Not sure if I understand you correctly?

        I actually think that my problem lies with the JQuery plug-in call I am using in my gallery template: 

         <script type="text/javascript">
    $(function() {
        $('.gallery a').lightBox();
    });
    </script>


        All my galleries are class="gallery", so the Lightbox pulls them all in (each ul has a different ID, I thought that was enough). I could change this to unique IDs to differentiate them, but how do I change the JQuery plug-in call then? I know nothing about JavaScript I’m afraid other than the very basics of how to pull it into my code. In the instructions for the jquery.lightbox-0.5 it provides examples of how the images can be selected: 

        <script type="text/javascript">
$(function() {
	// Use this example, or...
	$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	$('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	$('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>


        Any ideas?

        huh
          • 4310
          • 2,310 Posts
          bunk58 Reply #4, 17 years ago
          Oops,sorry about that didn’t look carefully enough sad
          The JS seems to indicate the title tag will be used to create an array of image sets, but that’s used only to define which set to start at, rather than to limit it to that set only.
          If you look here although it’s a different jQuery lightbox (PrettyPhoto) it does limit you to individual sets, defined by the "rel" tag.
          There are other jQuery lightboxes that have this functionality.
            • 25132
            • 129 Posts
            rivendell48 Reply #5, 17 years ago
            Really appreciate your help and you have confirmed for me what I suspected regarding the image sets. I’ll have a look around at a different lightbox option that can differentiate. In the meantime, my client has agreed to using single pictures to list the various galleries as opposed to text only, so I’ve been able to use the MaxiGallery snippet - solved the problem for now! Thanks again smiley