- This topic has 2 replies, 2 voices, and was last updated 9 years, 7 months ago by
. This post has been viewed 5055 times
Viewing 3 posts - 1 through 3 (of 3 total)
-
Posts
-
I have tis code that is under. I am trying to do that one product have more than one image. So when someone click on it it will do a lightbox and then in lightbox are 2x images of the product or more. How can i do that ? Make a owl-carousel in a lightbox ? Or i can popup a lightbox with 2 and more images ?
<div role="main" class="main"> <div class="container push-top"> <h2>Dla Niego</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=".koszulki"><a href="#">Koszulki</a></li> <li data-option-value=".spodnie"><a href="#">Spodnie</a></li> <li data-option-value=".buty"><a href="#">Buty</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 koszulki"> <div class="portfolio-item img-thumbnail"> <a href="produkty/koszulka-0001.jpg" class="thumb-info" title="Linia 1<br>Linia 2"> <img alt="" class="img-responsive" src="produkty/koszulka-0001.jpg"> <span class="thumb-info-title"> <span class="thumb-info-inner">Koszulka 0001</span> <span class="thumb-info-type">Koloy: <div class="colors-form color-49da53"></div><div class="colors-form color-ea1111"></div></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> <li class="col-md-3 col-sm-6 col-xs-12 isotope-item koszulki"> <div class="portfolio-item img-thumbnail"> <a href="produkty/koszulka-0002.jpg" class="thumb-info"> <img alt="" class="img-responsive" src="produkty/koszulka-0002.jpg"> <span class="thumb-info-title"> <span class="thumb-info-inner">Koszulka 0002</span> <span class="thumb-info-type">Koloy: <div class="colors-form color-518cb5"></div><div class="colors-form color-49da53"></div><div class="colors-form color-000"></div></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> <li class="col-md-3 col-sm-6 col-xs-12 isotope-item koszulki"> <div class="portfolio-item img-thumbnail"> <a href="produkty/koszulka-0003.jpg" class="thumb-info"> <img alt="" class="img-responsive" src="produkty/koszulka-0003.jpg"> <span class="thumb-info-title"> <span class="thumb-info-inner">Koszulka 0003</span> <span class="thumb-info-type">Koloy: <div class="colors-form color-518cb5"></div><div class="colors-form color-ea1111"></div></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> <li class="col-md-3 col-sm-6 col-xs-12 isotope-item koszulki"> <div class="portfolio-item img-thumbnail"> <a href="produkty/koszulka-0004.jpg" class="thumb-info"> <img alt="" class="img-responsive" src="produkty/koszulka-0004.jpg"> <span class="thumb-info-title"> <span class="thumb-info-inner">Koszulka 0004</span> <span class="thumb-info-type">Koloy: <div class="colors-form color-fff"></div></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> <li class="col-md-3 col-sm-6 col-xs-12 isotope-item buty"> <div class="portfolio-item img-thumbnail"> <a href="produkty/buty-0001.jpg" class="thumb-info"> <img alt="" class="img-responsive" src="produkty/buty-0001.jpg"> <span class="thumb-info-title"> <span class="thumb-info-inner">Buty 0001</span> <span class="thumb-info-type">Koloy: <div class="colors-form color-777"></div></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> <li class="col-md-3 col-sm-6 col-xs-12 isotope-item buty"> <div class="portfolio-item img-thumbnail"> <a href="produkty/buty-0002.jpg" class="thumb-info"> <img alt="" class="img-responsive" src="produkty/buty-0002.jpg"> <span class="thumb-info-title"> <span class="thumb-info-inner">Buty 0002</span> <span class="thumb-info-type">Koloy: <div class="colors-form color-000"></div></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> <li class="col-md-3 col-sm-6 col-xs-12 isotope-item spodnie"> <div class="portfolio-item img-thumbnail"> <a href="produkty/spodnie-0001.jpg" class="thumb-info"> <img alt="" class="img-responsive" src="produkty/spodnie-0001.jpg"> <span class="thumb-info-title"> <span class="thumb-info-inner">Spodnie 0001</span> <span class="thumb-info-type">Koloy: <div class="colors-form color-518cb5"></div></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> <li class="col-md-3 col-sm-6 col-xs-12 isotope-item spodnie"> <div class="portfolio-item img-thumbnail"> <a href="produkty/spodnie-0002.jpg" class="thumb-info"> <img alt="" class="img-responsive" src="produkty/spodnie-0002.jpg"> <span class="thumb-info-title"> <span class="thumb-info-inner">Spodnie 0002</span> <span class="thumb-info-type">Koloy: <div class="colors-form color-518cb5"></div></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>
Hello, you can set a JS with the list of the images, like this:
HTML:
<a href="#" id="open-images"> <img alt="" class="img-responsive" src="img/projects/project.jpg"> </a>
JS:
(js/custom.js)$('#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' });Thanks.
Viewing 3 posts - 1 through 3 (of 3 total)
This topic is marked as "RESOLVED" and can not rceive new replies.
