Fancybox image gallery and HTML list

Question

I'm working on a school project and I tried to use Fancybox to create a gallery. My issue is : the gallery is created, you can see all images of the gallery on the side list menu, all functionalities are working just fine except that no matter what image you first click on or even browsing the gallery in the modal "window" only the first image of the set is displayed and all others are not even shown.

I might have done things wrong so here's my code.

Here's my HTML (important parts only):

Head scripts

<!--Regular Scripts-->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jq-plugins/rotation.js" type="text/javascript" ></script>
<script src="js/jq-plugins/transit.js" type="text/javascript" ></script>
<script src="js/jq-plugins/Vague.js" type="text/javascript" ></script>
<script src="js/jq-plugins/Modal_fancybox.js" type="text/javascript" whatIdo="fancybox3"></script>

List

<ul id="gallerie">
    <li>
        <a>
            <img src="photoshop/test1.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test2.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test3.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test4.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test5.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test6.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test7.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test8.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test9.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test10.png" alt="img test"/>
        </a>
    </li>
</ul>

Here is the javascript I use to modify every links around those images :

$(document).ready(updateTags);
//Calls ↓


function updateTags(){
    var $LIs = $("#gallerie").children("li");

    $LIs.each(doTagUpdate);

    setupModal();
}
//Calls ↓


function doTagUpdate(index, elem){
    //caching results for performance optimization
    var $a = $(this).children("a").eq(0);
    var $img = $a.children("img").eq(0);
    var $path = $img.attr("src");

    //get filename from img
    var filename = getFileName($path);

    //set attributes and properties
    $a.attr("href", $path);
    $a.attr("data-fancybox", "gallery");
//    $a.attr("data-fancybox",filename);
//    $a.addClass("VNgallerie");
//    $a.attr("rel","gallery");
//    $a.attr("data-type","images");
}
//Calls ↓


function getFileName(path){
    var beg = 0;
    var end = 0;
    //beg and end exist for understanding purposes only

    var Fname = "";

    //get filename with extension
    for(var i = path.length ; i >= 0 ; i-=1){
        if(path.charAt(i) === '/'){
            beg=i+1;

            Fname = path.substring(beg);
            break;
        }
    }

    //remove extension
    for(var i = Fname.length ; i >= 0 ; i-=1){
        if(Fname.charAt(i) === '.'){
            end=i;

            Fname = Fname.substring(0, end);
        }
    }

    return Fname;
}







function setupModal(){
    $.fancybox.defaults.speed = sidemenu_slide_duration * 0.6;

    $(".VNgallerie").fancybox(
        {
            'image': {
                protect:true
            },
            'type': 'image',
            'helpers': {
                'title': null
            }
        }
    );
}

Here is a JSfiddle : https://jsfiddle.net/Voltra/h8g2hcu7/10/

(NB: It seems like everything works fine in the fiddle but I made the same changes (links to cdn to get the exact same versions of jQuery etc ...) and it didn't fix the problem on my end)

Answer 1

Add data-fancybox attribute with the same value to your links to create a gallery.

Answer 2

First of all, thank you all for your answers. Using all info you had you couldn't solve my problem :

When I was editing the JSfiddle to add more support to solve my problem I saw it was working fine in the fiddle so I browse through every single one of the stylesheets I used and found my mistakes :

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    overflow-x: hidden;



    font-family: raleway;
}

body *{
    z-index: 1;
    float:left;
}

Modifying paddings, margins, box-sizing and float on everything had a HUGE impact on how fancybox behaved.

Therefore I updated the rules to only select the element that I'm sure that won't affect fancybox's ones.

I'll reconsider my uses of global CSS mods when I use third-party plugins that use CSS ...