I'm using a slider to show Images in a web page. Code works fine and the images slide properly. But when I add images dynamically via jquery, the images are stacking one below other instead of sliding. What could be the reason?
Here is the code which works fine, when I statically link images to the slider.
<div class="slider" data-arrows="true" >
<ul class="slides" id="slider" >
<li> <img alt="Image" src="img/work-1.jpg" /> </li>
<li> <img alt="Image" src="img/work-1.jpg" /> </li>
<li> <img alt="Image" src="img/work-1.jpg" /> </li>
<li> <img alt="Image" src="img/work-1.jpg" /> </li>
</ul>
</div>
This is where I'm stuck when I add images dynamically via append the images are stacking one below the other.
for(var i=0; i<10;i++){
var x = ' <li>'+
'<img alt="Image" src="img/work-1.jpg" />'+
'</li>';
$("#slider").append(x);
}
If you're open to using flexbox, you could do something like this with your css:
$(document).ready(function() {
for (var i = 0; i < 10; i++) {
var x = ' <li>' +
'<img alt="Image" src="https://placebear.com/g/100/100" />' +
'</li>';
$("#slider").append(x);
}
})
.slides {
display: flex;
padding-left: 0;
list-style: none;
}
<div class="slider" data-arrows="true">
<ul class="slides" id="slider">
<li> <img alt="Image" src="https://placebear.com/g/100/100" /> </li>
<li> <img alt="Image" src="https://placebear.com/g/100/100" /> </li>
<li> <img alt="Image" src="https://placebear.com/g/100/100" /> </li>
<li> <img alt="Image" src="https://placebear.com/g/100/100" /> </li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you need the slides to wrap, you can add flex-wrap: wrap; to your .slides css selector.
Related
I am creating a website wherein a user is looking at the tracking screen. In this screen the user is able to see the current status of the package. As soon as first process is completed, the completed process then blurred and the current status is glows. Here is the code I have written in HTML and CSS
li {
list-style-type: none;
float: left;
margin: 10px;
}
.imgage {
margin-top: 150px;
}
body h2 {
font-family: sans-serif, 'Montserrat';
}
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<ul>
<li>
<div class="imgage">
<img src="images/fil_1.jpg" width="202px" height="100px">
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img src="images/export1.jpg" width="202px" height="100px">
<h2>IMPORT</h2>
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img src="images/UKimport.jpg" width="202px" height="100px">
<h2>CARRIER</h2>
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img src="images/DHL.jpg" width="202px" height="100px">
<h2>DHL</h2>
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img src="images/HMRC_logo.jpg" width="202px" height="100px">
<h2>HMRC</h2>
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img src="images/Importt.jpg" width="202px" height="100px">
</li>
</ul>
</div>
I tried my best to understand what you wanted to do.
My interpretation is that you wanted to blur the page while things get loaded and then show the loaded page.
I added the code to do that plus I added a code to emulate the photos that were not loading since they were not included with the full URI to reach them.
If by any chance this is not what you wanted, then please edit your question and let me know so I can change my answer to it.
// Emulating loading the photos
$(window).on('load', function() {
$("#cover").fadeOut(200);
});
function callLoad(){
$(window).load();
}
setTimeout(callLoad, 1000);
$(function() {
$('.image').each(function(){
let randomNumber = (Math.floor(Math.random() * 100) + 1);
$(this).attr('src', 'https://picsum.photos/id/' + randomNumber + '/202/100');
});
var images = $('.image').sort(function (a, b) {
return +$(a).data('sort') - +$(b).data('sort');
});
var index = 0;
var getNextImage = function(index){
var remainder = index % images.length;
return $(images[(remainder === 0) ? images.length - 1 : remainder - 1]);
};
$("#btnNext").click(function(){
getNextImage(index - 1).addClass("blur-content");
getNextImage(index).toggleClass("blur-content");
index++;
});
});
li {
list-style-type: none;
float: left;
margin: 10px;
}
.imgage {
margin-top: 50px;
}
body h2 {
font-family: sans-serif, 'Montserrat';
}
#cover {
top:0;
left: 0;
position: fixed;
height: 100%;
width: 100%;
background: #CCC;
z-index:9999;
}
.blur-content {
-webkit-filter: url(#svg-blur);
filter: url(#svg-blur);
}
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<button id="btnNext"> Next </button>
<div id="cover" class="blur-content"></div>
<div>
<ul>
<li>
<div class="imgage">
<img class="image blur-content" src="images/fil_1.jpg" width="202px" height="100px" data-sort="7">
<h2>SOMETHING</h2>
</li>
<li>
<div class="imgage">
<img class="image blur-content" src="images/export1.jpg" width="202px" height="100px" data-sort="2">
<h2>IMPORT</h2>
</li>
<li>
<div class="imgage">
<img class="image blur-content" src="images/UKimport.jpg" width="202px" height="100px" data-sort="3">
<h2>CARRIER</h2>
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img class="image blur-content" src="images/DHL.jpg" width="202px" height="100px" data-sort="4">
<h2>DHL</h2>
</li>
<li>
<div class="imgage">
<img class="image blur-content" src="images/HMRC_logo.jpg" width="202px" height="100px" data-sort="5">
<h2>HMRC</h2>
</li>
<li>
<div class="imgage">
<img class="image blur-content" src="images/Importt.jpg" width="202px" height="100px" data-sort="6">
<h2>HMRC2</h2>
</li>
</ul>
</div>
<!-- SVG Blur Filter -->
<!-- 'stdDeviation' is the blur amount applied -->
<svg id="svg-filter-blur">
<filter id="svg-blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
</filter>
</svg>
I have Unordered list, and each item of the list has a list of images. I wrote a jQuery function to operate slider using prev and next. The function working write when there is only one list of images. Nonetheless, when I have list and each item has list of images when ever I clicked on any slider only the first slider is working regardless on which slider I clicked. my question is, How can I modify the jQuery function to operate only for the slider that I clicked on and not other sliders for other group of images.
Here is the html code:
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act" >
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>
Here is the jQuery function:
$(document).ready(function() {
$('.swipe-prev').click(function(){
console.log("Prev"); // Print "Prev" on click swipe-prev
var prevImg = $('img.active').prev('.result-image-act img');
if(prevImg.length == 0) {
prevImg = $('.result-image-act img:last');
}
$('img.active').removeClass('active');
prevImg.addClass('active');
});
$('.swipe-next').click(function() {
console.log("Next"); // Print "Next" on click swipe-next
var nextImg = $('img.active').next('.result-image-act img');
if(nextImg.length == 0) {
nextImg = $('.result-image-act img:first');
}
$('img.active').removeClass('active');
nextImg.addClass('active');
});
});
You may reduce everything to only one event handler.
$('.swipe-prev, .swipe-next').on('click', function (e) {
var op = ($(this).is('.swipe-prev')) ? 'prev' : 'next';
var firtOrlast = ($(this).is('.swipe-prev')) ? 'last' : 'first';
var imgList = $(this).closest('.result-row');
var currImg = imgList.find('.result-image-act img.active');
var nextImg = currImg[op]();
if (nextImg.length == 0) {
nextImg = imgList.find('.result-image-act img:' + firtOrlast);
}
currImg.removeClass('active');
nextImg.addClass('active');
});
.active {
padding: 3px;
border: 1px solid #021a40;
background-color: #ff0;
}
.swipe-wrap {
display: inline-flex;
}
.swipe-wrap > div {
padding-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p> ></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>
Your problem is coming from how you find the active image. There are presumably multiples, but you want to find the one related to whatever was clicked. Change lines like this:
$('img.active')
to something like:
$(this).closest("ul.results").find("img.active")
to get the img.active within the clicked ul.
I want to open main image in fancybox when click on main image in flexslider.
If possible that when click on main image and open it in fancybox with all thumbnail as like display in flexslider with prev and next button.
How to do it possible? Is there any parameter in flexslider or need to do customization?
Please help me. I mention code here.
Thanks
=> Code :
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox.css"/>
<script src="modernizr.js"></script>
<script src="jquery.flexslider.js"></script>
<style type="text/css">
#import "https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css";
body { font-family: avenir, sans-serif; }
#slider .slides img {
width: 450px;
height: 300px;
margin: 0 auto;
}
.container{
max-width: 50%;
margin : 0 auto;
}
#carousel .flex-active-slide img {
opacity: 1;
}
#carousel img {
opacity: 0.65;
}
.flex-direction-nav .flex-next { right: 0 !important; margin-right: -40px; }
.flex-direction-nav .flex-prev { left: 0 !important; margin-left: -40px; }
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; cursor: pointer;}
</style>
<script type="text/javascript">
$(window).load(function() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 70,
itemMargin: 10,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
$('#carousel li').click(function() {
$('#carousel li').removeClass('flex-active-slide')
$(this).addClass('flex-active-slide');
});
</script>
</head>
<body>
<!-- Include jQuery library and Flexslider script -->
<!-- Place somewhere in the <body> of your page -->
<div class="container">
<div id="slider" class="flexslider" onclick="func(this)">
<ul class="slides">
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<li>
<img src="7.jpg" />
</li>
<li>
<img src="8.jpg" />
</li>
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<li>
<img src="7.jpg" />
</li>
<li>
<img src="8.jpg" />
</li>
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
</div>
</body>
</html>
fancyBox works with any slider/carousel, you just have to iniatialise using .selector option and you have to tweak this to suit your needs, e.g., this selector has to return visible links and has to exclude duplicates. Something like this:
$().fancybox({
selector : '.slides li:not(.clone) a'
});
Here are demos using
Slick - https://codepen.io/fancyapps/pen/pdbrjx
OwlCarousel2 - https://codepen.io/fancyapps/pen/mqvOoz
Swiper - https://codepen.io/fancyapps/pen/eWVyVg
flexslider - https://codepen.io/fancyapps/pen/QQdXwx
I have a list of images and separate list where each item is related to an image. Is it possible to have a hover event that fades the related image in and out using JQuery? I.e. when you hover over listid-1, image-1 fades in.
This is the best I could do:
$(document).ready(function(){
$( ".options li" ).hover(function( event ) {
$('.image-' + (this - ".listid")).toggleFade( "300" );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='images'>
<img class='image-1' src='1.jpg'>
<img class='image-2' src='2.jpg'>
<img class='image-3' src='3.jpg'>
<img class='image-4' src='4.jpg'>
<img class='image-5' src='5.jpg'>
</div>
<div class="options">
<nav>
<ul>
<li class='listid-1'>One</li>
<li class='listid-2'>Two</li>
<li class='listid-3'>Three</li>
<li class='listid-4'>Four</li>
<li class='listid-5'>Five</li>
</ul>
</nav>
</div>
</div>
You have a couple of issues. Firstly concatenating the this reference with a string isn't going to give you a valid selector. Secondly, the method name is fadeToggle(), not toggleFade().
To fix the problems you could first group the li and img elements by giving them all the same respective classes, then relate the hovered li to the img by their indexes, something like this:
$(document).ready(function() {
$(".options .listid").hover(function(event) {
$('.image').eq($(this).index()).fadeToggle("300");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='images'>
<img class='image' src='1.jpg'>
<img class='image' src='2.jpg'>
<img class='image' src='3.jpg'>
<img class='image' src='4.jpg'>
<img class='image' src='5.jpg'>
</div>
<div class="options">
<nav>
<ul>
<li class='listid'>One</li>
<li class='listid'>Two</li>
<li class='listid'>Three</li>
<li class='listid'>Four</li>
<li class='listid'>Five</li>
</ul>
</nav>
</div>
</div>
You can get class of current li and split at - to get number and use it as selector for image.
$('img').hide()
$(".options li").hover(function() {
$('.image-' + ($(this).attr('class').split('-')[1])).fadeToggle("300");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='images'>
<img class='image-1' src='1.jpg' alt="1">
<img class='image-2' src='2.jpg' alt="2">
<img class='image-3' src='3.jpg' alt="3">
<img class='image-4' src='4.jpg' alt="4">
<img class='image-5' src='5.jpg' alt="5">
</div>
<div class="options">
<nav>
<ul>
<li class='listid-1'>One</li>
<li class='listid-2'>Two</li>
<li class='listid-3'>Three</li>
<li class='listid-4'>Four</li>
<li class='listid-5'>Five</li>
</ul>
</nav>
</div>
</div>
If you have multiple classes on images instead you can use data attributes to select images.
$('img').hide()
$(".options li").hover(function() {
$('img.image-' + $(this).data('img')).fadeToggle(300)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='images'>
<img class='image-1' src='1.jpg' alt="1">
<img class='image-2' src='2.jpg' alt="2">
<img class='image-3' src='3.jpg' alt="3">
<img class='image-4' src='4.jpg' alt="4">
<img class='image-5' src='5.jpg' alt="5">
</div>
<div class="options">
<nav>
<ul>
<li data-img="1" class='listid-1'>One</li>
<li data-img="2" class='listid-2'>Two</li>
<li data-img="3" class='listid-3'>Three</li>
<li data-img="4" class='listid-4'>Four</li>
<li data-img="5" class='listid-5'>Five</li>
</ul>
</nav>
</div>
</div>
I am working with TB and trying to find solution to combine carousel and modal feature. I know that carousel gallery already exists in ver.3 but I am still working in 2.3 for some reason.
The problem is when user clicks on the carousel on the page it appears modal window and starts to slide images from the begining and not from the current (clicked) image.
Idea is to find that src attribute of clicked element and pass it over to element within modal window. Any ideas how to do that? Thanks! Here is html structure.
<!-- Modal -->
<div id="modal-trigger" class="modal hide fade modal-trigger slide" aria-hidden="true">
<div class="modal-header">
<div class="num"></div>
<button class="close" data-dismiss="modal">Schließen</button>
</div>
<div class="modal-body">
<div id="myCarousel2" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel2" data-slide-to="0" class=" active"> </li>
<li data-target="#myCarousel2" data-slide-to="1" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="2" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="3" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="4" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="5" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="6" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="7" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="8" class=""> </li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/1_big.jpg" alt="" />
</div>
<div class="item">
<img src="img/2.jpg" alt="" />
</div>
<div class="item">
<img src="img/3.jpg" alt="" />
</div>
<div class="item">
<img src="img/4.jpg" alt="" />
</div>
<div class="item">
<img src="img/5.jpg" alt="" />
</div>
<div class="item">
<img src="img/6.jpg" alt="" />
</div>
<div class="item">
<img src="img/7.jpg" alt="" />
</div>
<div class="item">
<img src="img/8.jpg" alt="" />
</div>
<div class="item">
<img src="img/9.jpg" alt="" />
</div>
</div>
<a class="left carousel-control" href="#myCarousel2" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel2" data-slide="next">›</a>
</div>
</div>
</div>
Here is my test js code made for that:
$('.carousel').on('slide', function(e) {
// var slideFrom = $(this).find('.active').index();
// var slideTo = $(e.relatedTarget).index();
var clickedItem = $(this);
var replacedItem = $('#myCarousel2 .carousel-inner .item.active');
$(clickedItem).click(function() {
$(this).attr({
src: $(this).attr('src'),
'src': $(this).attr('src')
})
console.log("it should replace element src value");
});
// console.log(slideFrom+' => '+slideTo);
});
Something similar I am trying to achive but only with Twitter Bootstrap 2.3
http://bootdey.com/snippets/view/Bootstrap-Gallery-with-Modal-Lightbox-and-Carousel-114
**This code helped me to open almost the right image in modal window, but unfortunately it picks up allways the image with +1 number of img-data. Does anyone has solution to pick just the right image which in this case is one number lower? **
$('#myCarousel .item a').on('click', function() {
$('#modal-trigger').carousel(parseInt($(this).children().attr("data-id")));
console.log("Code works");
});
try to use trigger click on indicator corresponding to the clicked element (using index or id)
$('.carousel .someitem').on('click', function() {
var index = $(this).attr('index'); // or other (what you want)
$('#modal-trigger .carousel-indicators:eq('+index+')').trigger('click');
});
Something like this.
It's not tested.
And the answer is:
$('#myCarousel .item a').on('click', function() {
var goTo = parseInt($(this).children().attr("data-id"), 10) - 1;
if(goTo < 0)
goTo = 0;
$('#modal-trigger').carousel(goTo);
console.log("Code works");
});