More images in lightbox

[djly5y]

I am trying to add more images when user click on the image But i get “The image could not be loaded.”

HTML CODE:

			<div role="main" class="main">

				<div class="container push-top">

					<h2>Dla Niej</h2>

					<ul class="nav nav-pills sort-source" data-sort-id="portfolio" data-option-key="filter">
						<li data-option-value="*" class="active"><a href="#">Wszystkie</a></li>
						<li data-option-value=".spodnie"><a href="#">Spodnie</a></li>
						<li data-option-value=".bluzy"><a href="#">Bluzy</a></li>
						<li data-option-value=".spodnie34"><a href="#">Spodnie ¾</a></li>
					</ul>

					<hr />

					<div class="row">

						<ul class="portfolio-list sort-destination lightbox" data-sort-id="portfolio" data-plugin-options='{"delegate": "a", "type": "image", "gallery": {"enabled": true}}'>
                        
                        
                        
                        
							<li class="col-md-3 col-sm-6 col-xs-12 isotope-item spodnie">
								<div class="portfolio-item img-thumbnail">
									<a href="#" id="open-images" class="thumb-info">
										<img alt="" class="img-responsive" src="produkty/spodnie-0001.jpg">
										<span class="thumb-info-title">
											<span class="thumb-info-inner">Model 101</span>
											<span class="thumb-info-type">Kolory: <div class="colors-form color-melanz"></div><div class="colors-form color-grafit"></div><div class="colors-form color-czarny"></div></span>
											<span class="thumb-info-type">Rozmiary: 158, 164, 170</span>
											<span class="thumb-info-type">Tęgość: 40, 42, 44, 46, 48, 50</span>
										</span>
										<span class="thumb-info-action">
											<span title="Universal" class="thumb-info-action-icon"><i class="fa fa-link"></i></span>
										</span>
									</a>
								</div>
							</li>
                            

						</ul>
					</div>

				</div>

			</div>

JS custom:

$('#open-images').magnificPopup({
    items: [{
        src: 'http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg',
        title: 'Image 1'
    },{
        src: 'http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg',
        title: 'Image 2'
    },{
        src: 'http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg',
        title: 'Image 3'
    }],
    gallery: {
        enabled: true
    },
    type: 'image'
});

---

[djly5y]

You told me in this answer http://www.okler.net/forums/topic/owl-carousel-in-the-lightbox-or-more-images-in-lightbox/

to put:

<a href="#" id="open-images">
	<img alt="" class="img-responsive" src="img/projects/project.jpg">
</a>

But when i Put it in all those divs and li its not working. But when i put it standalone it work. Please help

---

[Support]

Hello, there’s a conflict in the code you sent, if you’re going to use the JS I sent you need to remove that:

Let me know if you have any questions.

Thanks.

---

[djly5y]

Working like a charm solverd. Thank You !

---

[Author]

Posts