- In the extension bar, click the AdBlock Plus icon
- Click the large blue toggle for this website
- Click refresh
- In the extension bar, click the AdBlock icon
- Under "Pause on this site" click "Always"
- In the extension bar, click on the Adguard icon
- Click on the large green toggle for this website
- In the extension bar, click on the Ad Remover icon
- Click "Disable on This Website"
- In the extension bar, click on the orange lion icon
- Click the toggle on the top right, shifting from "Up" to "Down"
- In the extension bar, click on the Ghostery icon
- Click the "Anti-Tracking" shield so it says "Off"
- Click the "Ad-Blocking" stop sign so it says "Off"
- Refresh the page
- In the extension bar, click on the uBlock Origin icon
- Click on the big, blue power button
- Refresh the page
- In the extension bar, click on the uBlock icon
- Click on the big, blue power button
- Refresh the page
- In the extension bar, click on the UltraBlock icon
- Check the "Disable UltraBlock" checkbox
- Please disable your Ad Blocker
- Disable any DNS blocking tools such as AdGuardDNS or NextDNS
- Disable any privacy or tracking protection extensions such as Firefox Enhanced Tracking Protection or DuckDuckGo Privacy.
If the prompt is still appearing, please disable any tools or services you are using that block internet ads (e.g. DNS Servers, tracking protection or privacy extensions).
Question
fukachu
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:
<script type="text/javascript" src="/colorbox/jquery.colorbox.js"></script> <script type="text/javascript"> $(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; }); }); </script>
First instance, working like a charm:
* 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.
<a><img src="/images/main_menu/product5_big.jpg" usemap="#sales"> <map name="sales"> <area shape="rect" coords="445,12,635,76" href="/files/EasterFlyer2010.pdf" alt="Past Easter Sale Flyer" /> <area shape="rect" coords="445,92,635,165" title="" rel="colorboxruleseaster" href="/images/easter/gallery/1.jpg"/> <div class="eastergallery2"> <a title="" rel="colorboxruleseaster" href="/images/easter/gallery/2.jpg"/> <a title="" rel="colorboxruleseaster" href="/images/easter/gallery/3.jpg"/> <a title="" rel="colorboxruleseaster" href="/images/easter/gallery/4.jpg"/> <a title="" rel="colorboxruleseaster" href="/images/easter/gallery/5.jpg"/> <a title="" rel="colorboxruleseaster" href="/images/easter/gallery/6.jpg"/> <a title="" rel="colorboxruleseaster" href="/images/easter/gallery/7.jpg"/> <a title="" rel="colorboxruleseaster" href="/images/easter/gallery/8.jpg"/> <a title="" rel="colorboxruleseaster" href="/images/easter/gallery/9.jpg"/> <a title="" rel="colorboxruleseaster" href="/images/easter/gallery/10.jpg"/> </div> <area shape="rect" coords="445,177,635,238" class="cbyoutube" href="http://www.youtube.com/v/[videoaddress]" /> <area shape="default" nohref="nohref" title="Default" alt="Default"/> </map> </a>
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
Link to comment
https://www.neowin.net/forum/topic/945902-jquery-colorbox-lightbox-implementation-help/Share on other sites
0 answers to this question
Recommended Posts