ВОПРОС "Мини галерея"

[Killafromtequila]

Доброго времени суток =)
Столкнулся с такой проблемой, пишу одностраничный сайт пытаюсь сделать небольшую галерею с поп окнами
Проблема такая: Картинки не отображаются, просто белые окна, не пойму с чем напортачил, собственно сама задумка что бы там была сортировка картинок по фильтрам.

Спойлер: Скрин

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


Я еще зелёный по этому не догоняю что натворил)
и как исправить?


Вот код:

<div class="gallery">
                    <div class="container">
                    <ul id="filters" class="clearfix">
                        <li><span class="filter" data-filter="app web">Веб дизайн</span></li>
                        <li><span class="filter" data-filter="icon web card">Логотипы</span></li>
                        <li><span class="filter" data-filter="web app icon card">Принты</span></li>
                        <li><span class="filter active" data-filter="app card icon logo web">Всё</span></li>
                    </ul>
                        <div id="portfoliolist" style="">
                        <div class="portfolio logo1 mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
                            <div class="portfolio-wrapper">              
                                <a class="popup-with-zoom-anim zoom pink" href="#small-dialog1">
                                    <img src="images/p1.з" alt="Image 1" style="top: 0px;">
                                </a>
                            </div>
                        </div>              
                        <div class="portfolio web mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
                            <div class="portfolio-wrapper">          
                                <a class="popup-with-zoom-anim zoom pink" href="#small-dialog1">
                                    <img src="images/p2.jpg" alt="Image 2" style="top: 0px;">
                                </a>
                            </div>
                        </div>      
                        <div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
                            <div class="portfolio-wrapper">                      
                                <a class="popup-with-zoom-anim zoom pink" href="#small-dialog1">
                                    <img src="images/p3.jpg" alt="Image 3" style="top: 0px;">
                                </a>
                            </div>
                        </div>              
                        <div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
                            <div class="portfolio-wrapper">          
                                <a class="popup-with-zoom-anim zoom pink" href="#small-dialog1">
                                    <img src="images/p4.jpg" alt="Image 4" style="top: 0px;">
                                </a>
                            </div>
                        </div>  
                                   
                        <div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
                            <div class="portfolio-wrapper">
                                <a class="popup-with-zoom-anim zoom pink" href="#small-dialog1">
                                    <img src="images/p5.jpg" alt="Image 5" style="top: 0px;">
                                </a>
                            </div>
                        </div>          
                       
                        <div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
                            <div class="portfolio-wrapper">          
                                <a class="popup-with-zoom-anim zoom pink" href="#small-dialog1">
                                    <img src="images/p6.jpg" alt="Image 6" style="top: 0px;">
                                </a>
                            </div>
                        </div>  
                        <div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
                            <div class="portfolio-wrapper">
                                <a class="popup-with-zoom-anim zoom pink" href="#small-dialog1">
                                    <img src="images/p7.jpg" alt="Image 7" style="top: 0px;">
                                </a>
                            </div>
                        </div>          
                       
                        <div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
                            <div class="portfolio-wrapper">          
                                <a class="popup-with-zoom-anim zoom pink" href="#small-dialog1">
                                    <img src="images/p8.jpg" alt="Image 8" style="top: 0px;">
                                </a>
                            </div>
                        </div>  
                    </div>
                </div><!-- container -->

 

[LocCodE]

Покажите исходники полностью. По HTML одному решить проблему не получиться, разве что сделать предложения:

1. Все таки неверно указаны пути до картинок.
2. Неправильно подключен скрипт для галереи.
3. Проверьте JS, возможно вы не указали класс, где лежат ваши картинки.

Чтобы проверить каждый каждый пункт — посмотрите консоль разработчика (F12 в Chrome) на наличие ошибок.