• 0

jquery colorbox (lightbox) implementation help


Question

Hey all,

Alright so I need to implement 3 separate instances of colorbox on a single page. The situation I have things at the moment can't be avoided as I really don't want to re-do the whole layout of this site for colorbox implementation. Also you will see i'm linking to the same pictures in 2 instances, I wanted to get it working before i bothered setting up the pictures for each one. So bare with me here.

In the header I have:

        &lt;script type="text/javascript" src="/colorbox/jquery.colorbox.js"></script>     &lt;script type="text/javascript"&gt;
            $(document).ready(function(){
                //Examples of how to assign the ColorBox event to elements
                $("a[rel='colorboxrules']").colorbox();
                $("[rel='colorboxruleseaster']").colorbox();
                $(".cbyoutube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
                //Example of preserving a JavaScript event for inline calls.
                $("#click").click(function(){ 
                    $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                    return false;
                });
            });
        &lt;/script&gt;

First instance, working like a charm:

&lt;a title="" rel="colorboxrules" href="/images/easter/gallery/1.jpg"&gt;&lt;img src="/images/main_menu/product3_big.jpg"&gt;&lt;/a&gt;
&lt;div class="eastergallery2"&gt;
&lt;a title="" rel="colorboxrules" href="/images/easter/gallery/2.jpg" /&gt;
&lt;a title="" rel="colorboxrules" href="/images/easter/gallery/3.jpg" /&gt;
&lt;a title="" rel="colorboxrules" href="/images/easter/gallery/4.jpg" /&gt;
&lt;a title="" rel="colorboxrules" href="/images/easter/gallery/5.jpg" /&gt;
&lt;a title="" rel="colorboxrules" href="/images/easter/gallery/6.jpg" /&gt;
&lt;a title="" rel="colorboxrules" href="/images/easter/gallery/7.jpg" /&gt;
&lt;a title="" rel="colorboxrules" href="/images/easter/gallery/8.jpg" /&gt;
&lt;a title="" rel="colorboxrules" href="/images/easter/gallery/9.jpg" /&gt;
&lt;a title="" rel="colorboxrules" href="/images/easter/gallery/10.jpg" /&gt;
&lt;/a&gt;&lt;/div&gt;

* not sure why that last </a> needs to be there... but the page breaks if i remove it.

** class eastergallery2 just tells the div to display : none

Ok so that one works perfectly, now for the second one. I am forced, due to the way I built the site to use the <map> tag to map links onto an image, this will not be changed, I will remove the gallery if need be. One of those mapped areas is meant to link to a second gallery and another one maps to a youtube video.

youtube video - works perfectly fine, no problem there.

photo gallery - only first photo is showing up.

&lt;a&gt;&lt;img src="/images/main_menu/product5_big.jpg" usemap="#sales"&gt;
&lt;map name="sales"&gt;
    &lt;area shape="rect" coords="445,12,635,76" href="/files/EasterFlyer2010.pdf" alt="Past Easter Sale Flyer" /&gt;
    &lt;area shape="rect" coords="445,92,635,165" title="" rel="colorboxruleseaster" href="/images/easter/gallery/1.jpg"/&gt;
    &lt;div class="eastergallery2"&gt;
&lt;a title="" rel="colorboxruleseaster" href="/images/easter/gallery/2.jpg"/&gt;
&lt;a title="" rel="colorboxruleseaster" href="/images/easter/gallery/3.jpg"/&gt;
&lt;a title="" rel="colorboxruleseaster" href="/images/easter/gallery/4.jpg"/&gt;
&lt;a title="" rel="colorboxruleseaster" href="/images/easter/gallery/5.jpg"/&gt;
&lt;a title="" rel="colorboxruleseaster" href="/images/easter/gallery/6.jpg"/&gt;
&lt;a title="" rel="colorboxruleseaster" href="/images/easter/gallery/7.jpg"/&gt;
&lt;a title="" rel="colorboxruleseaster" href="/images/easter/gallery/8.jpg"/&gt;
&lt;a title="" rel="colorboxruleseaster" href="/images/easter/gallery/9.jpg"/&gt;
&lt;a title="" rel="colorboxruleseaster" href="/images/easter/gallery/10.jpg"/&gt;
&lt;/div&gt;
    &lt;area shape="rect" coords="445,177,635,238" class="cbyoutube" href="http://www.youtube.com/v/[videoaddress]"  /&gt;
    &lt;area shape="default" nohref="nohref" title="Default" alt="Default"/&gt;
&lt;/map&gt;
&lt;/a&gt;

Ok so as I said, the second gallery with rel="colorboxruleseaster' is only showing the first picture. Any suggestions to get this working? Thanks in advance

0 answers to this question

Recommended Posts

There have been no answers to this question yet

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.