Галерея изображений Fancybox и список HTML

Question

Я работаю над школьным проектом и пытался использовать Fancybox для создания галереи. Моя проблема в том, что галерея создана, вы можете видеть все изображения галереи в боковом меню списка, все функции работают просто отлично, за исключением того, что независимо от того, какое изображение вы нажимаете в первый раз или даже просматриваете галерею в модальном "окне" отображается только первое изображение из набора, а все остальные даже не отображаются.

Я мог сделать что-то не так, вот мой код.

Вот мой HTML (только важные части):

Головные скрипты

<!--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>

Список

<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>

Вот javascript, который я использую, чтобы изменить все ссылки вокруг этих изображений:

$(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
            }
        }
    );
}

Вот JSfiddle: https://jsfiddle.net/Voltra/h8g2hcu7/10/

(NB: кажется, что в скрипке все работает нормально, но я внес те же изменения (ссылки на cdn, чтобы получить точно такие же версии jQuery и т. Д.), И это не решило проблему с моей стороны)

Answer 1

Прежде всего, спасибо всем за ваши ответы. Используя всю имеющуюся у вас информацию, вы не смогли решить мою проблему:

Когда я редактировал JSfiddle, чтобы добавить дополнительную поддержку для решения моей проблемы, я увидел, что он отлично работает в скрипте, поэтому я просмотрел все таблицы стилей, которые использовал, и обнаружил свои ошибки:

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



    font-family: raleway;
}

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

Модификация отступов, полей, размеров ячеек и плавающих элементов оказала ОГРОМНОЕ влияние на поведение fancybox.

Поэтому я обновил правила, чтобы выбрать только тот элемент, который, я уверен, не повлияет на элементы fancybox.

Я пересмотрю свое использование глобальных модов CSS, когда буду использовать сторонние плагины, которые используют CSS ...

Answer 2

Добавлять data-fancybox атрибут с тем же значением для ваших ссылок, чтобы создать галерею.