Home/ Questions/Q 6910923
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T08:52:42+00:00

I’ve inserted small image-based navigation arrows inside the fancybox window that allows the user

  • 0

I’ve inserted small image-based navigation arrows inside the fancybox window that allows the user to navigate to related images once fancybox is opened.

Here is the code:

function formatTitle(title, currentArray, currentIndex, currentOpts) {
    return '<div id="tip7-title"> (title && title.length ? '<b>' + title + '</b>' : '' ) + '<a href="javascript:;" onclick="$.fancybox.prev();"><img class="left" src="" /></a>' + ' Image ' + (currentIndex + 1) + ' of ' + currentArray.length + ' <a href="javascript:;" onclick="$.fancybox.next();"><img class="right" src="" /></a> </div>';
}

How can I format the arrows so that the left arrow (which points to the previous image) is changed to a different image and is not clickable when the first image is on screen (ie. < Image 1 of 3 > )? Also, the same for the right arrow (which points to the next image) when the third image is on screen (ie. < Image 3 of 3 > ).

Thanks everyone!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Basically you have to validate 3 states and return your (arrow) images accordingly:

    1. When the currentIndex = 0, the first image is on screen then return a different left arrow image with no <a> tag wrapping it.

    2. When the currentIndex = (currentArray.length - 1), the last image is on screen then return a different right arrow image with no <a> tag wrapping it.

    3. Otherwise show both clickable arrows.

    BTW, the script you posted above has some syntax errors so I corrected it.

    So for a sample gallery with this html:

    <a class="fancyLink" rel="gallery" href="images/01.jpg">open gallery</a>
<a class="fancyLink" rel="gallery" href="images/02.jpg"></a>
<a class="fancyLink" rel="gallery" href="images/03.jpg"></a>

    I will use this script (Fancybox v1.3.x):

    $(document).ready(function() {
    $('.fancyLink').fancybox({
      'titleFormat': formatTitle,
      'showNavArrows': false,
      'titlePosition': 'inside'
    }); // fancybox
}); // ready

    and your (modified) “formatTitle” function:

    function formatTitle(title, currentArray, currentIndex, currentOpts) {
    if(currentIndex == 0) {
        return '<div id="tip7-title">'+ (title && title.length ? '<b>' + title +'</b>' : '' ) + '<img class="left" src="leftNoClick.png" />' + ' Image ' + (currentIndex + 1) + ' of ' + currentArray.length + ' <a href="javascript:;" onclick="$.fancybox.next();"><img class="right" src="rightYesClick.png" /></a></div>';
    }else if (currentIndex == (currentArray.length - 1)){
        return '<div id="tip7-title">'+ (title && title.length ? '<b>' + title +'</b>' : '' ) + '<a href="javascript:;" onclick="$.fancybox.prev();"><img class="left" src="leftYesClick.png" /></a>' + ' Image ' + (currentIndex + 1) + ' of ' + currentArray.length + ' <img class="right" src="rightNoClick.png" /></div>';
    } else {
        return '<div id="tip7-title">'+ (title && title.length ? '<b>' + title +'</b>' : '' ) + '<a href="javascript:;" onclick="$.fancybox.prev();"><img class="left" src="leftYesClick.png" /></a>' + ' Image ' + (currentIndex + 1) + ' of ' + currentArray.length + ' <a href="javascript:;" onclick="$.fancybox.next();"><img class="right" src="rightYesClick.png" /></a> </div>';
    } // if
}

    Notice the names I assigned to the arrow images so you will know what image goes where.

    • 0