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>
* 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.
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
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
Share on other sites
0 answers to this question
Recommended Posts