nivoSlider неопределенные ресурсы - PullRequest
Новая
       21

nivoSlider неопределенные ресурсы

2 голосов
/ 28 марта 2012

Я пытаюсь заставить nivoSlider работать на этом сайте http://fritech.co.uk/, где есть три изображения 

<div id="slideshow" class="section theme-nivo">
    <div class="ribbon"></div>
    <div class="nivoSlider">
        <img src="static/img/logos.png" alt="Our inhouse skills" />
        <img src="static/img/atlanta.png" alt="Modern technologies" />
        <img src="static/img/boston.png" alt="Ruggedly tested software" />
    </div>
</div>

Однако nivoSlider показывает только один из них, всегда самый верхний. Я не уверен, что здесь происходит не так. Любая помощь будет оценена.

Ответы [ 5 ]

5 голосов
/ 31 марта 2012

Ваша проблема в том, что вы добавляете идентификатор #slideshow в неправильный контейнер в своем html: 

<div id="top" class="bordered-section">
    <div id="slideshow" class="section theme-nivo">
        <div class="ribbon"></div>
        <div class="nivoSlider">

            <img src="http://placehold.it/260x180" alt="Our inhouse skills" />
            <img src="http://placehold.it/260x180" alt="Modern technologies" />
            <img src="http://placehold.it/260x180" alt="Ruggedly tested software" />
        </div>
    </div>
</div>

Идентификатор должен быть помещен в контейнер ваших изображений, которые используются в качестве фонаimages.

Исправлено. 

<div id="top" class="bordered-section">
    <div class="section theme-nivo">
        <div class="ribbon"></div>
        <div id="slideshow" class="nivoSlider">

            <img src="http://placehold.it/260x180" alt="Our inhouse skills" />
            <img src="http://placehold.it/260x180" alt="Modern technologies" />
            <img src="http://placehold.it/260x180" alt="Ruggedly tested software" />
        </div>
    </div>
</div>

Правильное использование вы можете найти в плагинах Документация .

3 голосов
/ 31 марта 2012

Найдено!

измените это 

<div id="slideshow" class="section theme-nivo">
    <div class="ribbon"></div>
    <div class="nivoSlider">
        <img src="static/img/logos.png" alt="Our inhouse skills" />
        <img src="static/img/atlanta.png" alt="Modern technologies" />
        <img src="static/img/boston.png" alt="Ruggedly tested software" />
    </div>
</div>

На это: 

<div class="section theme-nivo">
    <div class="ribbon"></div>
    <div id="slideshow" class="nivoSlider">
        <img src="static/img/logos.png" alt="Our inhouse skills" />
        <img src="static/img/atlanta.png" alt="Modern technologies" />
        <img src="static/img/boston.png" alt="Ruggedly tested software" />
    </div>
</div>

NivoSlider ожидает, что все дочерние элементы верхнего элемента будут изображениями, еслиЭлемент не является изображением, он будет искать первое изображение, которое он может найти в этом элементе.(см. здесь)

Вот почему вы получаете петлю неопределенного изображения и изображения логотипа.Поскольку элемент ленты не содержит изображений, и первое изображение из элемента nivoSlider - это логотип.

0 голосов
/ 14 марта 2014

Для документации о вашей ситуации,

я только что столкнулся с чем-то похожим: " k не определено " ..

это было пропущенное titleатрибут в теге img 

<img title="" src="http://placehold.it/260x180" alt="Our inhouse skills" />
0 голосов
/ 29 марта 2012

У меня была такая же проблема, попробуйте сменить JS http://pastebin.com/7QPV2rgr

0 голосов
/ 28 марта 2012

Что-то не так, может быть, вы запрашиваете изображение, которого нет на сервере или в этой папке.Потому что в консоли Firefox ( FireBug ) он выдает эту ошибку

undefined "NetworkError: 404 Not Found - http://fritech.co.uk/undefined"

В противном случае все выглядит хорошо. Пожалуйста, дважды проверьте изображения, которые вы пытаетесь загрузить в слайдер.

Надеюсь, это поможет.

...