I have been trying to add multiple instances of tiny slider. But it only works on the first div.
I wanna add two sliders with the same properties in two different div. First slider works fine but second slider get broken
let tnsslider = tns({
container: '.my-slider',
items: 3,
gutter: 20,
edgePadding: 20,
controlsPosition: 'bottom',
mouseDrag: true,
autoplay: true,
autoplayButtonOutput: false,
controlsContainer: '#custom-control',
nav: false,
responsive: {
0 : {
items: 1
},
768 : {
items: 2
},
1440 : {
items: 3
}
}
});
let tnsslider1 = tns({
container: '.my-slider',
items: 3,
gutter: 20,
edgePadding: 20,
controlsPosition: 'bottom',
mouseDrag: true,
autoplay: true,
autoplayButtonOutput: false,
controlsContainer: '#custom-control',
nav: false,
responsive: {
0 : {
items: 1
},
768 : {
items: 2
},
1440 : {
items: 3
}
}
});
This is my HTML structure which i have been using i created two different divs for both the sliders but only first one works as expected.
<div class="men-section">
<h2>Men</h2>
<div class="tnsslider">
<ul class="control" id="custom-control">
<li class="prev">
<i class="fas fa-angle-left fa-2x"></i>
</li>
<li class="next">
<i class="fas fa-angle-right fa-2x"></i>
</li>
</ul>
<div class="my-slider">
<img src="/assets/img/men-img.jpg" alt="" />
<img src="/assets/img/men-img (2).jpg" alt="" />
<img src="/assets/img/men-img (3).jpg" alt="" />
<img src="/assets/img/men-img (4).jpg" alt="" />
<img src="/assets/img/men-img (5).jpg" alt="" />
<img src="/assets/img/men-img (6).jpg" alt="" />
<img src="/assets/img/men-img (7).jpg" alt="" />
<img src="/assets/img/men-img (8).jpg" alt="" />
</div>
</div>
</div>
<div class="women-section">
<h2>Women</h2>
<div class="tnsslider1">
<ul class="control" id="custom-control">
<li class="prev">
<i class="fas fa-angle-left fa-2x"></i>
</li>
<li class="next">
<i class="fas fa-angle-right fa-2x"></i>
</li>
</ul>
<div class="my-slider">
<img src="/assets/img/men-img.jpg" alt="" />
<img src="/assets/img/men-img (2).jpg" alt="" />
<img src="/assets/img/men-img (3).jpg" alt="" />
<img src="/assets/img/men-img (4).jpg" alt="" />
<img src="/assets/img/men-img (5).jpg" alt="" />
<img src="/assets/img/men-img (6).jpg" alt="" />
<img src="/assets/img/men-img (7).jpg" alt="" />
<img src="/assets/img/men-img (8).jpg" alt="" />
</div>
</div>
</div>
You could try to change your second div class name, and put the same in your tnsslider1.container
Edit : try to change your id and controlsContainer
Related
I have a slider (owl slider - https://owlcarousel2.github.io/OwlCarousel2/index.html) . The slider has images as items, displaying 3 items per slide. Above the slider I have a title which will change when certain item from the slider is active.
<h6>
PROJECT PARTNERS <!-- this should changed to LOCAL PARTNER when 5th ITEM is active -->
</h6>
<div id="partner" class="partners owl-carousel">
<div class="item">
<img src="/wp-content/uploads/2019/03/grey-1.jpg" style="vertical-align:middle;" width="150" height="150" alt="Partner"/>
</div>
<div class="item">
<img src="/wp-content/uploads/2019/03/grey-2.jpg" style="vertical-align:middle;" width="150" height="110" alt="Partner"/>
</div>
<div class="item">
<img src="/wp-content/uploads/2019/03/grey-3.jpg" style="vertical-align:middle;" width="300" height="50" alt="Partner"/>
</div>
<div class="item">
<img src="/wp-content/uploads/2019/03/grey-4.jpg" style="vertical-align:middle;" width="300" height="50" alt="Partner"/>
</div>
<div class="item">
<img src="/wp-content/uploads/2019/03/grey-5.jpg" style="vertical-align:middle;" width="300" height="50" alt="Partner"/>
</div>
<div class="item">
<img src="/wp-content/uploads/2019/03/grey-6.jpg" style="vertical-align:middle;" width="300" height="50" alt="Partner"/>
</div>
</div>
<script>
jQuery(document).ready(function() {
jQuery('.partners').owlCarousel({
center: false,
items:1,
loop:false,
autoWidth: true,
margin:70,
responsive:{
600:{
items:3,
autoWidth: true,
margin:200
}
}
});
</script>
How can I do this?
$('.partners').owlCarousel({
center: false,
items: 1,
loop: false,
autoWidth: true,
margin: 70,
responsive: {
600:{
items:3,
autoWidth: true,
margin:200
}
},
onChange: function (event) {
console.log(event);
if (event.item.index == 2) {
$("h6").text("chnaged title");
}
}
})
https://jsfiddle.net/vdqj60a5/1/
I'm trying to create a full screen slideshow with images in a loop with chocolat js.
The getting started documentation says to start with:
<div class="chocolat-parent" data-chocolat-title="set title">
<a class="chocolat-image" href="series/1.jpg" title="caption image 1">
<img class="chocolat-open" width="100" src="series/1.jpg" />
</a>
<a class="chocolat-image" href="series/2.jpg" title="caption image 2">
<img width="100" src="series/2.jpg" />
</a>
<a class="chocolat-image" href="series/3.jpg" title="caption image 3">
<img width="100" src="series/3.jpg"/>
</a>
</div>
My javascript is like this:
$(document).ready(function(){
$('.chocolat-parent').Chocolat({
loop: true,
imageSize: 'cover',
});
});
But how can I make it automatically open and loop?
Please check the code below for the demo.
for more details, you can check the documentation
This is what you need
$(document).ready(function(){
var instance = $('.chocolat-parent').Chocolat({
loop: true,
fullScreen : true,
imageSize: 'cover',
}).data('chocolat');
instance.api().open();
window.setInterval(function(){
instance.api().next();
},2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chocolat/0.4.19/css/chocolat.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chocolat/0.4.19/js/jquery.chocolat.min.js"></script>
<div class="chocolat-parent" data-chocolat-title="set title">
<a class="chocolat-image" href="https://i.stack.imgur.com/C5xFh.jpg" title="caption image 1">
<img class="chocolat-open" width="100" src="https://i.stack.imgur.com/C5xFh.jpg" />
</a>
<a class="chocolat-image" href="https://i.stack.imgur.com/kbOvd.jpg" title="caption image 2">
<img width="100" src="https://i.stack.imgur.com/kbOvd.jpg" />
</a>
<a class="chocolat-image" href="https://i.stack.imgur.com/jjOFl.jpg" title="caption image 3">
<img width="100" src="https://i.stack.imgur.com/jjOFl.jpg"/>
</a>
</div>
you can use like this
<script>
$(document).ready(function(){
var instance = $('#example1').Chocolat({
loop: true,
imageSize: 'cover',
}).data('chocolat');
instance.api().open();
setInterval(function(){ instance.api().next();}, 3000);
});
</script>
I am creating images grid and I am using the following library Justified Gallery. The hover effect is working fine for the img-alt attribute. but I want to display some icons with links on the hover.
Just like the following picture
Take a look the the following Fiddle
https://jsfiddle.net/zvj2o7fy/1/embedded/result/
<div id="justifiedGallery">
<a href="#" title="What's your destination?">
<img alt="What's your destination?" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Just in a dream Place">
<img alt="Just in a dream Place" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Il Capo at Palermo">
<img alt="Il Capo at Palermo" src="http://lorempixel.com/300/226/?1" />
</a>
<a href="#" title="Erice">
<img alt="Erice" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/240/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/127/300/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/440/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/140/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/240/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/227/340/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/140/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
</div>
Please help me to create this.
as per documentation(http://miromannino.github.io/Justified-Gallery/captions/)
remove title attribute and add a div with class caption
just like
<a href="#">
<img alt="What's your destination?" src="http://lorempixel.com/340/227/?1" />
<div class="caption">
<div class="icon-cart">
<img src="https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png"/>
</div>
</div>
</a>
in this div you can add any thing.
If you need links on caption, need a small structure change like
<div id="justifiedGallery">
<div>
<a href="http://lorempixel.com/340/227/?1">
<img alt="Title 1" src="http://lorempixel.com/340/227/?1" />
</a>
<div class="caption">
<a href="#">
<i class="fa fa-shopping-cart"></i>
</a>
<a href="#">
<i class="fa fa-cloud-download"></i>
</a>
</div>
</div>
<div>
<a href="http://lorempixel.com/340/227/?1">
<img alt="Title 1" src="http://lorempixel.com/340/227/?1" />
</a>
<div class="caption">
<a href="#">
<i class="fa fa-shopping-cart"></i>
</a>
<a href="#">
<i class="fa fa-cloud-download"></i>
</a>
</div>
</div>
</div>
Justified Gallery recommends using the Colorbox jQuery library inside of a callback to achieve what you are trying to do. Colorbox controls a caption lightbox div that gets shown on hover.
If you look at the Colorbox 'multiple galleries with one call' demo, you'll see you can add custom icons for each image by adding a hidden div called caption inside of the gallery container:
<div class="container">
<a href="image.jpg" class="jg-entry cboxElement">
<img alt="Alt Message" src="image.jpg">
<div class="caption">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</a>
</div>
To invoke the captions and make them appear via JS, you'll make your call to Colobox inside of justified gallery's callback via the .jg-complete class. Inside of the callback, the colorbox library is invoked with the necessary parameters (like opacity and transition shown in the code sample below) to get your icons fading into view exactly you would like.
JS:
$('.container').justifiedGallery({
rowHeight : 50
}).on('jg.complete', function () {
$(this).find('a').colorbox({
maxWidth : '80%',
maxHeight : '80%',
opacity : 0.8,
transition : 'elastic',
current : ''
});
});
You can dynamically replace the caption with whatever you like. Here's a quick solution.
$("img").mouseenter(function(){
$(this).siblings(".caption").html("<div><a href='#'><img src='source'></a>");
});
Use jquery hover selector to set the display of icons
The default display of icons should be none in css
This should help
https://codeshare.io/IGavT
I am using a JS slider with 5 slides each with an image and a caption. I want to add a class only in that image where width > 2xheight. Following is my JS code:
$(".slides img").each(function() {
var w = $("img.gallery").width();
var h = $("img.gallery").height() * 2;
if (w > h) {
$(this).addClass("auto");
};
});
Please help me to solve this problem. Thanks in advance,
Chirag.
Below is my HTML code:
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<span data-picture data-alt="WK Credentials">
<span data-src="images/large/slide1.jpg" data-media="(min-width: 1601px)"></span>
</span>
<img src="images/slide5.jpg" id="myImg" alt="" title="" class="gallery" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<center>
<div class="intro">
<h1 class="head">Incredible India | Tiffin</h1>
<p class="text">Use what you know about your users to determine whether the words
and phrases you plan to use are appropriate.</p>
</div>
</center>
</li>
<li>
<span data-picture data-alt="WK Credentials">
<span data-src="images/large/slide2.jpg" data-media="(min-width: 1601px)"></span>
</span>
<img src="images/slide2.jpg" id="myImg" alt="" title="" class="gallery" />
<p class="flex-caption">This image is wrapped in a link!</p>
</li>
<li>
<span data-picture data-alt="WK Credentials">
<span data-src="images/large/slide3.jpg" data-media="(min-width: 1601px)"></span>
</span>
<img src="images/slide3.jpg" id="myImg" alt="" title="" class="gallery" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<span data-picture data-alt="WK Credentials">
<span data-src="images/large/slide4.jpg" data-media="(min-width: 1601px)"></span>
</span>
<img src="images/slide4.jpg" id="myImg" alt="" title="" class="gallery" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<span data-picture data-alt="WK Credentials">
<span data-src="images/slide5.jpg" data-media="(min-width: 1601px)"></span>
</span>
<img src="images/slide5.jpg" id="myImg" alt="" title="" class="gallery" />
<p class="flex-caption">Extra Wide Image</p>
</li>
</ul>
</div>
<ul class="flex-direction-nav">
<li><a class="prev" href="#"><img src="images/themes.png" alt="" title="" /></a></li>
<li><a class="next" href="#"><img src="images/themes.png" alt="" title="" /></a></li>
</ul>
</div>
Try this:
$(document).ready(function(){
$(".slides img").each(function(){
$(this).load(function(){
var w = $(this).width();
var h = $(this).height() *2;
if(w > h){
$(this).addClass("auto");
};
});
});
});
If the class "gallery" is actually significant here this might help, otherwise the other answers would work.
$(window).load(function(){
$(".slides img.gallery").each(function(){
if($(this).width() > ($(this).height()*2)) {
$(this).addClass("auto");
};
});
});
Iam tyring to use this slider: http://www.menucool.com/javascript-image-slider
BUT when Iam trying to use a code like this, iam unable to get the output..
<table>
<tr>
<td>
<div id="sliderFrame">
<div id="slider">
<a href="http://www.google.com" target="_blank">
<img src="JSImageSlider/images/image-slider-1.jpg" alt="Welcome to Google" />
</a>
<img src="JSImageSlider/images/image-slider-2.jpg" alt="" width="1200px"/>
<img src="JSImageSlider/images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="JSImageSlider/images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="JSImageSlider/images/image-slider-5.jpg"/>
</div>
</div>
</td>
<td>
<div id="sliderFrame">
<div id="slider">
<a href="http://www.google.com" target="_blank">
<img src="JSImageSlider/images/image-slider-1.jpg" alt="Welcome to Google" />
</a>
<img src="JSImageSlider/images/image-slider-2.jpg" alt="" width="1200px"/>
<img src="JSImageSlider/images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="JSImageSlider/images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="JSImageSlider/images/image-slider-5.jpg"/>
</div>
</div>
</td>
</tr>
</table>
First: double your slider id. ID = identity of element! Mark sliderFrame as class. Like this:
<table>
<tr>
<td>
<div class="sliderFrame">
<div id="slider">
<a href="http://www.google.com" target="_blank">
<img src="images/image-slider-1.jpg" alt="Welcome to Google" />
</a>
<img src="images/image-slider-2.jpg" alt="" width="1200px"/>
<img src="images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg"/>
</div>
</div>
</td>
<td>
<div class="sliderFrame">
<div id="slider2">
<a href="http://www.google.com" target="_blank">
<img src="images/image-slider-1.jpg" alt="Welcome to Google" />
</a>
<img src="images/image-slider-2.jpg" alt="" width="1200px"/>
<img src="images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg"/>
</div>
</div>
</td>
</tr>
</table>
Second: change your css file:
.sliderFrame {position:relative;width:700px;margin: 0 auto;}
#slider, #slider2 {
width:700px;height:306px;
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider img, #slider2 img {
position:absolute;
border:none;
display:none;
}
And the last one: your js code must implement another instance of your slider:
var sliderOptions=
{
sliderId: "slider",
effect: "series1",
effectRandom: false,
pauseTime: 2600,
transitionTime: 500,
slices: 12,
boxes: 8,
hoverPause: true,
autoAdvance: true,
captionOpacity: 0.3,
captionEffect: "fade",
thumbnailsWrapperId: "thumbs",
license: "free"
};
var sliderOptions2 =
{
sliderId: "slider2",
effect: "series1",
effectRandom: false,
pauseTime: 2600,
transitionTime: 500,
slices: 12,
boxes: 8,
hoverPause: true,
autoAdvance: true,
captionOpacity: 0.3,
captionEffect: "fade",
thumbnailsWrapperId: "thumbs2",
license: "free"
};
var imageSlider=new mcImgSlider(sliderOptions);
var imageSlider2=new mcImgSlider(sliderOptions2);
Thats all. Table tag is innosent =)