Search code examples
javascriptjqueryhtmlcolorbox

Make Colorbox Load one Image at a time

Im using the jQuery Colorbox plugin to load some images on the page. My issue is, colorbox will naturally take multiple instances in the same Div, and then allow the user to scroll through the images with the arrow buttons.

I would like to have colorbox just load each image individually, without creating a separate instance/class of colorbox for each image.

Example Code:

<a href="../../images/rd/demo/1.3.png" class="group2" ><img src="/images/rd/demo/2.png" /></a>
<a href="../../images/rd/demo/1.3.png" class="group2" ><img src="/images/rd/demo/2.png" /></a>
<a href="../../images/rd/demo/1.3.png" class="group2" ><img src="/images/rd/demo/2.png" /></a>

$(".group2").colorbox({
    rel:'group2', 
    transition:"fade",
    opacity:0.50,
    innerWidth:650,
    innerHeight:400,
    arrowKey: false     
});

If I click on one of the images/links above, colorbox will load all three and allow the user to tab through them. I just want each image loaded individually, without having to give each one a unique class id.

I checked the Colorbox Documentation, and did not see anything that helped my case.

Solution

  • I think you just need to remove this:

    rel:'group2',

    According to the docs, that's what is causing it to group them together.