I have a bootstrap page and I downloaded jquery plugin (lightgallery.js) and plugins works very well with theese codes;
<div class="item active" id="lightgallery">
<a href="http://s.fotorama.io/1.jpg">
<img src="http://s.fotorama.io/1.jpg" alt="...">
</a>
<a href="http://s.fotorama.io/2.jpg">
<img src="http://s.fotorama.io/2.jpg" alt="...">
</a>
</div>
and this is my jquery function to work plugin
$('#lightgallery').lightGallery();
it's good but if I change my html structure plugin is not work
my html structure is below;
<div id="lightgallery">
<div class="item active">
<a href="http://s.fotorama.io/1.jpg">
<img src="http://s.fotorama.io/1.jpg" alt="...">
</a>
</div>
<div class="item">
<a href="http://s.fotorama.io/2.jpg">
<img src="http://s.fotorama.io/2.jpg" alt="...">
</a>
</div>
</div>
Use a list like this..
<ul id="lightgallery">
<li class="item active">
<a href="http://s.fotorama.io/1.jpg">
<img src="http://s.fotorama.io/1.jpg">
</a>
</li>
<li class="item">
<a href="http://s.fotorama.io/2.jpg">
<img src="http://s.fotorama.io/2.jpg">
</a>
</li>
</ul>
Related
I'm in the process of building an image gallery. There is a set of images in a grid layout and the idea is that when one of those images is clicked, it launches a bootstrap carousel pop-up. The main (active) slide and list indicator should be the image that was clicked, the rest of the slides and indicators should be populated with pre-existing set of images that is within the grid. Is it possible to achieve this without using a separate set of images for the carousel?
Here's the code...
<div class="container">
<div class="image-wrapper">
<img class="image" src="image-1.jpg" />
</div>
<div class="image-wrapper">
<img class="image" src="image-2.jpg" />
</div>
<div class="image-wrapper">
<img class="image" src="image-3.jpg" />
</div>
<div class="image-wrapper">
<img class="image" src="image-4.jpg" />
</div>
</div>
Bootstrap carousel (currently uses a separate set of images)
<div id="custCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="active-img" src="image-1.jpg">
</div>
<div class="carousel-item">
<img src="image-2.jpg">
</div>
<div class="carousel-item">
<img src="image-3.jpg">
</div>
<div class="carousel-item">
<img src="image-4.jpg">
</div>
</div> <!-- Left right -->
<a class="carousel-control-prev" href="#custCarousel" data-slide="prev">
<span class="carousel-control-prev-icon">
←
</span>
</a>
<a class="carousel-control-next" href="#custCarousel" data-slide="next">
<span class="carousel-control-next-icon">
→
</span>
</a>
<!-- Thumbnails -->
<ol class="carousel-indicators list-inline">
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0"
data-target="#custCarousel">
<img src="image-1.jpg">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#custCarousel">
<img src="image-2.jpg">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-2" data-slide-to="2" data-target="#custCarousel">
<img src="image-3.jpg">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-3" data-slide-to="3" data-target="#custCarousel">
<img src="image-4.jpg">
</a>
</li>
</ol>
</div>
My html code like this :
<ul id="sticky-tab" class="hide-on-med-and-down">
#foreach (Sitecore.Data.Items.Item item in _stickyMenu.Children)
{
<li class="content accent-4 z-depth-2 #item.Fields[Templates.Navigable.Fields.CustomClass]" data-color="#item.Fields[Templates.Navigable.Fields.CustomClass]">
<a class="#classTriger" href="#(popupID==string.Empty?item.LinkFieldUrl(Templates.Link.Fields.Link).ToString():popupID)">
<div class="text">#item.Fields[Templates.Navigable.Fields.NavigationTitle]</div>
</a>
</li>
}
</ul>
If it generated, the result like this :
<ul id="sticky-tab" class="hide-on-med-and-down">
<li class="content accent-4 z-depth-2 red" data-color="red">
<a class="" href="/Specialties/menu1">
<div class="icon"><img src="" /></div>
<div class="text">menu 1</div>
</a>
</li>
<li class="content accent-4 z-depth-2 " data-color="">
<a class="" href="/Contents/menu2">
<div class="icon"><img src="" /></div>
<div class="text">menu 2</div>
</a>
</li>
<li class="content accent-4 z-depth-2 " data-color="">
<a class="" href="/Contents/menu3">
<div class="icon"><img src=""/> </div>
<div class="text">menu 3</div>
</a>
</li>
</ul>
I want to tracking link click with google analytics. I try like this :
<a class="#classTriger" href="#(popupID==string.Empty?item.LinkFieldUrl(Templates.Link.Fields.Link).ToString():popupID)" onclick="ga('send', 'event', 'a', 'click');">
<div class="text">#item.Fields[Templates.Navigable.Fields.NavigationTitle]</div>
</a>
But, it does not work. How can I solve this problem?
I have a page I'm trying to complete that has a tabbed inner menu system, and within them (the first and last tab) there are justified galleries
http://miromannino.github.io/Justified-Gallery/
The code works well within the first tab, but when I put it within the last tab it turns all the images into thumbnails 80px by 80px. I initially thought that perhaps this was limited to one gallery per page, so I did some testing and I was able to add another one outside of the tabs with no issue.
I did some further testing and figured out that the reason it was working in the first tab and not the last was because the first tab has an active class on it, making the div a block element (display: block) and as soon as I put active on the other tab it made the gallery work but obviously broke the tabs.
At this point I'm stuck as to what I can do to get this to work, so I'm hoping someone here can help me out a little. Below is the code, thanks!
<div class="middleContent">
<div class="container">
<div class="row">
<div class="col-sm-9 leftContent">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#orderOnline" role="tab">Menu</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#reviews" role="tab">Reviews</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#about" role="tab">About</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#photos" role="tab">Photos</a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="orderOnline" role="tabpanel">
<div class="row">
<h2>MENU</h2>
<div id="mygallery" >
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-10.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-10.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-11.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-11.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-12.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-12.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-13.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-13.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-14.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-14.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-15.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-15.jpg"/>
</a>
</div>
</div>
</div>
<div class="tab-pane" id="reviews" role="tabpanel">
<h2>Reviews</h2>
</div>
<div class="tab-pane" id="about" role="tabpanel">
<h2>About</h2>
</div>
<div class="tab-pane" id="photos" role="tabpanel">
<div>
<div>
<h2>Food</h2>
<div id="foodgallery">
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-10.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-10.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-11.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-11.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-12.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-12.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-13.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-13.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-14.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-14.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-15.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-15.jpg"/>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery:
<script>
$('#mygallery').justifiedGallery({
rowHeight: 300,
lastRow: 'nojustify',
randomize: false,
margins: 10
});
</script>
<script>
$(function(){
$('#foodgallery').justifiedGallery({
rowHeight: 200,
lastRow: 'nojustify',
randomize: false,
margins: 10
});
});
</script>
I am using slick-lightbox plugin https://github.com/jongacnik/slick-lightbox.
I have a gallery of images.
I am trying to do this now:-
$('.slider-lightbox').slickLightbox({
navigateByKeyboard: true,
slick:{infinite:'false'}
});
But this is not disabling the infinite looping.
HTML code
<div class="image-gallery-content">
<ul class="slider-lightbox">
<li class="video active">
<a href="https://www.youtube.com/watch?v=KCI8Wb4KTG8" width="400px" target="_blank">
<img src="images/community/img2.jpg" alt="">
</a>
<img class="play-btn" src="images/video-icon.png">
</li>
<li class="image active">
<a href="images/community/img3.jpg" target="_blank">
<img src="images/community/img3.jpg" alt="">
</a>
</li>
<li class="image active">
<a href="images/community/img1.jpg" target="_blank">
<img src="images/community/img1.jpg" alt="">
</a>
</li>
</ul>
</div>
You need to pass a proper (=boolean) false into slick, not a string 'false':
$('.slider-lightbox').slickLightbox({
navigateByKeyboard: true,
slick: {infinite:false}
});
I have piece of static code of bootstrap carousal and I want to implement it with angular ngRepeat. I have a array of images. How can I achieve following code format using loop throught images? I want to break images as group of three inside div with item class .Here is code
<div class="container-fluid">
<div class="col-xs-12">
<div class="carousel slide multi-item-carousel" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails text-center">
<li class="col-xs-2"><a href="#1">
<img src="abc.jpg" class="center-block img-responsive" /></a><span>Page 1</span></li>
<li class="col-xs-2"><a href="#1">
<img src="abc.jpg" class="center-block img-responsive" /></a><span>Page 2</span></li>
<li class="col-xs-2"><a href="#1">
<img src="abc.jpg" class="center-block img-responsive" /></a><span>Page 3</span></li>
</ul>
</div>
<div class="item">
<ul class="thumbnails text-center">
<li class="col-xs-2"><a href="#1">
<img src="abc.jpg" class="center-block" /></a><span>Page 4</span></li>
<li class="col-xs-2"><a href="#1">
<img src="abc.jpg"class="center-block" /></a><span>Page 5</span></li>
<li class="col-xs-2"><a href="#1">
<img src="abc.jpg" class="center-block" /></a><span>Page 6</span></li>
</ul>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><span class="glyphicon glyphicon-menu-left"></span></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><span class="glyphicon glyphicon-menu-right"></span></a>
</div>
</div>
</div>
Thanks in advance.