I’m trying to make a fade slideshow with different speed values for the transition effect.
I don't want to change the Timeout, or the Fx…I just want to change the speed transition value for each image...It is possible?
Thank you very much in advance!!!
This is the code:
$('#s1').cycle({
fx: 'fade',
speed: 1000, //this is that I want to change for each img!!!
timeout: 1700,
next: '#s1',
});
<div id="s1" class="pics">
<img src="img.jpg" width="450" height="300" />
<img src="img.jpg" width="450" height="300" />
<img src="img.jpg" width="450" height="300" />
</div>
I use the following property to declare per slide delays:
timeoutFn: function (a) { return $(a).data('delay') * 1000; },
/.../
which reads the "delay" data attribute from the slide.
I.e. your image tags needs to be decorated in the following manner:
<div id="s1" class="pics">
<img src="img.jpg" width="450" height="300" data-delay="1" />
<img src="img.jpg" width="450" height="300" data-delay="2" />
<img src="img.jpg" width="450" height="300" data-delay="3" />
</div>
EDIT:
I read your question too quickly. I realize now you did not want to change the delay between transitions - but rather the speed of the transition.
I have not done that myself, but one approach that might work is using the event "before" in the following manner:
$('#s1').cycle({
fx: 'fade',
speed: 1000, //this is that I want to change for each img!!!
timeout: 1700,
next: '#s1',
before: function(e1, e2, opts) { opts.speed = parseInt($(e1).data('speed')); }
});
Related
There seems to be a time delay before the below mention functions starts to work. I'm not able to identify why it is so. Could anybody guide me on this??
The images do show initially but without the fade in or fade out effect but once all the images are done going the first loop, the animation works.
JS:
$(function fadeAnimation() {
$(".imageClass img:gt(0)").hide();
setInterval(function fadeAnimation() {
$(".imageClass :first-child")
.fadeOut(3000)
.next("img")
.fadeIn(3000)
.end()
.appendTo(".imageClass");
}, 5500);
});
HTML:
<div class="slidesDiv" id="cust">
<img class="imageClass" src="images/Folder1/1.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/2.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/3.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/4.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/5.jpg?" alt="" />
</div>
You have a couple issues in your code.
.imageClass are the <img>... You have to use the container's class, which is .slidesDiv.
You have to use the callback of the animations... Now, both .fadeIn() and .fadeOut are executing at the same moment.
Your timing is wrong... The animations are taking 6 seconds, but you have set the interval to 5,5 seconds.
See comments in code for the details.
$(function fadeAnimation() {
// Hide all image
$(".slidesDiv img").hide();
// Fade the first in right away.
$(".slidesDiv :first-child")
.fadeIn(3000);
// Start the interval to loo through all image
// The interval will execute for the first time in 6 seconds from now.
setInterval(function fadeAnimation() {
// Fade the first out.
$(".slidesDiv :first-child")
.fadeOut(3000, function(){ // This is a "callback" when the fade out is complete
// Fade In the next image
$(this).next("img")
.fadeIn(3000);
// append the faded out image to the end of the container.
$(this).appendTo(".slidesDiv");
});
}, 6000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidesDiv" id="cust">
<img class="imageClass" src="https://via.placeholder.com/200x200?text=1" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=2" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=3" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=4" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=5" alt="" />
</div>
I am currently building a site and using the smoothy template located here:
Smoothy Template
If you keep refreshing the site, you'll see the Nivo Slider does not load immediately. This causes all my anchor links to the main page to be thrown off vertically by the same height as the slider images once the Nivo Slider has loaded. I've tried several solutions, such as setting the image height and width manually, and also using a placeholder that fades out once Nivo Slider has loaded, but to no avail.
Here is my code:
<div id="sliderwrapper">
<div id="slider" class="nivoSlider templatemo_slider">
<img src="images/slider/img_1_blank.jpg" width="1050" height="500" alt="slide 1" />
<img src="images/slider/img_2_blank.jpg" width="1050" height="500" alt="slide 2" />
<img src="images/slider/img_3_blank.jpg" width="1050" height="500" alt="slide 3" />
</div>
<div id="preloader" class"nivoSlider templatemo_slider">
<img src="images/preloader.jpg" width="1050" height="500" />
</div>
</div>
And here is my function:
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:12,
animSpeed:500, //Slide transition speed
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:false, //Next & Prev
directionNavHide:true, //Only show on hover
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){}, //Triggers after all slides have been shown
lastSlide: function(){}, //Triggers when last slide is shown
afterLoad: function(){ $('#preloader').fadeOut(500);} //Triggers when slider has loaded
});
});
I have following html code.
<div id="polaroid">
<figure>
<img src="assets/polaroid01.jpg" width="200" height="200" alt="Red mushroom" />
<figcaption>Pretty red mushroom</figcaption>
</figure>
<figure>
<img src="assets/polaroid02.jpg" width="200" height="200" alt="Rainbow near Keswick" />
<figcaption>Rainbow near Keswick</figcaption>
</figure>
<figure>
<img src="assets/polaroid03.jpg" width="200" height="200" alt="An old tree" />
<figcaption>Nice old tree</figcaption>
</figure>
</div><!--end polaroid-->
In this i want to store all the image tags in an array. I know, I can access the figure tags like this.
var images= document.getElementById('gall').getElementsByTagName('figure');
But i don't know how to access the image tag.
I tried this.
document.getElementById('gall').getElementsByTagName('figure').getElementsByTagName('img');
But this doesn't work.
In this case it's more convenient to use querySelectorAll:
var images = document.querySelectorAll('#gall figure img');
You mean like this:
var images= document.getElementById('gall').getElementsByTagName('figure');
images.getElementsByTagName("img");
This is possible if you use JQuery. Simply Do This.
Include Jquery Library (any version).
select image : $("#polaroid img").(any action);
Example:
put this above your code:
<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#polaroid img").css("border", "1px solid #000000");
});
</script>
I have a simple jquery slideshow. I need to know how to change the interval time individually for each image
I only want the first image to be "9000" and the rest of them to be "3000"
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut(2500).next('img').fadeIn(2500).end().appendTo('.fadein');}, 9000);});
</script>
<div class="fadein" >
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg"></div>
Just set a timeout for 9000, then set the interval for 3000:
$(function(){
function fade() {
$('.fadein :first-child').fadeOut(2500).next('img').fadeIn(2500).end().appendTo('.fadein');
}
setTimeout(function() {
fade();
setInterval(fade, 3000);
}, 9000);
});
This might be what you're looking for. It will at least give you something to play with.
http://jsfiddle.net/BjornJohnson/42b8X/
You set the durations you want as data attributes, which are used by the script to set the delay for a setTimeout.
Like:
<div id="x">
<img class="active" data-timeout="3000" src="https://si0.twimg.com/profile_images/2644394397/748dd7e11df8dbb93f0fcf2abc141526.png" />
<img data-timeout="1500" src="https://si0.twimg.com/profile_images/3379531545/ce1eed2263515e4a173dffc815e1a6fc.jpeg" />
<img data-timeout="5000" src="https://si0.twimg.com/profile_images/3632836331/6e3f4995bd41d49b724e13e694eb1a2d.jpeg" />
<img data-timeout="2000" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQb09ZMKsDuY5lko2JNEfnXb8_8HTfedS9Uuk_7fdcTGoH5Ps-Xxg" />
</div>
I have this code:
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>
$(function()
{
function animation()
{
$('#img0').attr('src',$('#img1').attr('src')).fadeOut(4000).attr('src',$('#img2').attr('src')).fadeIn(4000).fadeOut(4000).attr('src',$('#img3').attr('src')).fadeIn(4000).fadeOut(4000) ;
animation();
}
});
</script>
<body>
<img id="img0" width="613" height="260" alt="OffLease Only Lot" />
<img src="static/images/home/slides/SLIDERS-mP.jpg" id="img1" width="613" height="260" alt="OffLease Only Lot" hidden="true" />
<img src="static/images/home/slides/slider_usa.jpg" id="img2" width="613" height="260" alt="OffLease Only Lot" hidden="true" />
<img src="static/images/home/slides/SLIDERS-ODOMETER.jpg" id="img3" width="613" height="260" alt="OffLease Only Lot" hidden="true" />
</body>
</html>
i want slide showing the images by changing the source of image and proceed by appearing and disappearing it.
but my code didn't work
why?
how can i fix it?
If you're trying to cycle the three images, do something like this:
function animate1() {
$('#img1').fadeIn(4000, function() {
$('#img1').fadeOut(4000, animate2);
})
}
function animate2() {
// Do the same thing here, and do animate3 too
}
$(function() { $('#img0').fadeOut(4000, animate1) };
I would also take a minute to go over the jQuery fadeOut and fadeIn pages. I don't think they work the way you think they work.
http://api.jquery.com/fadeOut/
http://api.jquery.com/fadeIn/
You have to wait for an animation to finish first like this...
element$.fadeOut(4000, function () {
// Do something when faded out
element$.fadeIn(4000, function () {
// Do something when faded in
});
});