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

jQuery colorbox alternative links (Evo)

    • 16278
    • 928 Posts
    kp52 Reply #1, 15 years, 2 months ago
    I'm using jQuery colorbox in Evo 1.0.5 to "view more photos" in a lightbox from a page that initially displays a single photo in a DIV. Two problems (assume very little skill with jQuery on my part):

    1) There's a clash with Quick Manager, which also uses colorbox. QM seems to be using the same jQuery main file as my script, but its own copy of colorbox in its plugin folders. Is there a simple fix for this?

    2) As it stands, I generate a list of links to the picture files relevant to the current page, with the REL attribute telling jQuery what set to create the lightbox for. The first link has an IMG tag as its link text, and links to the second picture in the set. So far, so good - the lightbox displays the set, starting with the next photo and ending with the one shown initially.

    I want to add a "View more photos" text link below the initial clickable picture, but if I make it a hyperlink to photo 2 with the right REL attribute, I now have an extra copy of photo 2 in the set. Without the REL, I can't get the others in the set. How do I make the text link act as an alternative to clicking on the picture to see more without adding an unwanted duplicate?

    <script>
		$(document).ready(function(){
			$("a[rel='events'],a[rel='weddings']").colorbox({opacity:0.6,overlayClose:false,current:"{current}/{total}"});
		});
	</script>


    <article id="photo">
<a href="assets/images/_weddings/wedding_flowers_2.jpg" rel="weddings" title=""><img class="splashPic" src="assets/images/wedding_flowers_1.jpg" alt="*" /></a>
<a href="assets/images/_weddings/wedding_flowers_3.jpg" rel="weddings" title="Hooray! Hooray!"></a>
<a href="assets/images/_weddings/wedding_flowers_4.jpg" rel="weddings" title=""></a>
<a href="assets/images/_weddings/wedding_flowers_1.jpg" rel="weddings" title="My Special Day"></a>
<!-- No good:
<p id="photoLink" style="clear:both;"><a rel="weddings" href="assets/images/_weddings/wedding_flowers_2.jpg">View more photos </a></p> 
-->
<!-- Lame substitute: -->
<p id="photoLink">Click on picture to view more photos</p>
</article>


    ??? KP
      • 22427
      • 793 Posts
      ottogal Reply #2, 15 years, 2 months ago
      Ad 1)
      No idea

      Ad 2)
      I had a short look only, but wouldn't it be enough to omit the 
      rel="weddings"
      from the link to prevent it to be added a second time to the group of pictures for the lightbox? So it would be
      <p id="photoLink" style="clear:both;"><a href="assets/images/_weddings/wedding_flowers_2.jpg">View more photos </a></p>
        • 22427
        • 793 Posts
        ottogal Reply #3, 15 years, 2 months ago
        No, of course I'm wrong. That would destroy any connection with the colorbox and just show an isolated picture (you said it already).

        I don't have much experience with colorbox, but wouldn't it be an idea to make it a slideshow with slideshowAuto set to false and to use the "view more photos" link to start the slideshow? [ed. note: ottogal last edited this post 15 years, 2 months ago.]
          • 22427
          • 793 Posts
          ottogal Reply #4, 15 years, 2 months ago
          Maybe the very last hint on this site http://colorpowered.com/colorbox/#click could be helpful.

          Edit:
          For your question 1) have a look to these threads:
          http://ttyl.modx.com/thread/2361/colorbox-vs-front-end-manager#dis-post-15203
          http://ttyl.modx.com/thread/15448/jquery-conflicts-modx-quickedit---dockeye-jquery-menu#dis-post-83193 [ed. note: ottogal last edited this post 15 years, 2 months ago.]
            • 16278
            • 928 Posts
            kp52 Reply #5, 15 years, 2 months ago
            Maybe the very last hint on this site http://colorpowered.com/colorbox/#click could be helpful.
            Very much so! Thank you for the tip.

            I am now getting the desired effect with the link like this: 
            <p id="photoLink" style="clear:both;"><a class="textLink" href="#">View more photos </a></p>

            and the jQuery code like this:
            <script>
		$(document).ready(function(){
			$("a[rel='events'],a[rel='weddings']").colorbox({opacity:0.6,overlayClose:false,current:"{current}/{total}"});
			$('a.textLink').click(function(e){
			var $gallery = $("a[rel='events'],a[rel='weddings']").colorbox();
			  e.preventDefault();
			  $gallery.eq(0).click();
			});
	});
</script>


            Clash with QM remains unresolved for now, probably thanks to my typos trying the suggested solutions, but it's not important for the site in question.

            :D KP
              • 22427
              • 793 Posts
              ottogal Reply #6, 15 years, 2 months ago
              On http://sottwell.com/e2g-plugin.html sottwell made a remark which might give a hint (although I don't know how to configure QM):
              Note - I already had the jQuery library, assets/js/jquery-1.6.1.min.js, loaded in my template head, since I tend to use a lot of jquery in all of my pages. This also means I have QuickManager configured to not load jquery in the front-end, as it is perfectly happy to use this library.
                • 24732 ☆ A M B ☆
                • 300 Posts
                redtoad Reply #7, 15 years, 2 months ago
                if you look at the configuration tab for QuickManager, you can disable the loading for jQuery on the front end there. Make sure you test when logged out as well.
                  ________

                  Anne
                  Toad-in-Chief
                  Red Toad Media - Web Design, Louisville KY
                  Hear me tweet: http://www.twitter.com/redtoadmedia
                  "Bring on the imperialistic condiments." - Rory Gilmore