I'm using the jQuery plugin Images-rotation in order to create a slideshow that plays when hovering over an image. I'd like to add transitions between the images, such as jQuery's fadeIn. The images are preloaded, which is why I think what I've attempted so far hasn't been successful.
I've also created this (http://jsfiddle.net/Lydmn2xn/) to hopefully easily show what's being used, although all of the code is found in the Javascript plugin itself. So far I've tried adding variations of the line $this.fadeIn("slow"); in various spots with no luck. Below is the code for the Javascript plugin with changes I've tried to make. Not sure how to point them out as I can't bold the text in the code. (Note: said changes are not in the Jfiddle, as they don't produce any changes).
$.fn.imagesRotation = function (options) {
var defaults = {
images: [], // urls to images
dataAttr: 'images', // html5 data- attribute which contains an array with urls to images
imgSelector: 'img', // element to change
interval: 1500, // ms
intervalFirst: 1500, // first image change, ms
callback: null // first argument would be the current image url
},
settings = $.extend({}, defaults, options);
var clearRotationInterval = function ($el) {
clearInterval($el.data('imagesRotaionTimeout'));
$el.removeData('imagesRotaionTimeout');
clearInterval($el.data('imagesRotaionInterval'));
$el.removeData('imagesRotaionInterval');
},
getImagesArray = function ($this) {
var images = settings.images.length ? settings.images : $this.data(settings.dataAttr);
return $.isArray(images) ? images : false;
},
preload = function (arr) { // images preloader
$(arr).each(function () {
$('<img/>')[0].src = this;
$this.fadeIn("slow");
});
},
init = function () {
var imagesToPreload = [];
this.each(function () { // preload next image
var images = getImagesArray($(this));
if (images && images.length > 1) {
imagesToPreload.push(images[1]);
}
});
preload(imagesToPreload);
};
init.call(this);
this.on('mouseenter.imagesRotation', function () {
var $this = $(this),
$img = settings.imgSelector ? $(settings.imgSelector, $this) : null,
images = getImagesArray($this),
imagesLength = images ? images.length : null,
changeImg = function () {
var prevIndex = $this.data('imagesRotationIndex') || 0,
index = (prevIndex + 1 < imagesLength) ? prevIndex + 1 : 0,
nextIndex = (index + 1 < imagesLength) ? index + 1 : 0;
$this.data('imagesRotationIndex', index);
if ($img && $img.length > 0) {
if ($img.is('img')) {
$img.attr('src', images[index]);
$this.fadeIn('slow');
}
else {
$img.css('background-image', 'url(' + images[index] + ')');
$img.fadeIn('slow');
}
}
if (settings.callback) {
settings.callback(images[index]);
}
preload([images[nextIndex]]); // preload next image
};
if (imagesLength) {
clearRotationInterval($this); // in case of dummy intervals
var timeout = setTimeout(function () {
changeImg();
var interval = setInterval(changeImg, settings.interval);
$this.data('imagesRotaionInterval', interval); // store to clear interval on mouseleave
}, settings.intervalFirst);
$this.data('imagesRotaionTimeout', timeout);
}
}).on('mouseleave.imagesRotation', function () {
clearRotationInterval($(this));
}).on('imagesRotationRemove', function () {
var $this = $(this);
$this.off('.imagesRotation');
clearRotationInterval($this);
});
};
$.fn.imagesRotationRemove = function () {
this.trigger('imagesRotationRemove');
};
Would that do the trick if it was in the right spot, or does fadeIn/Out not apply to preloaded images? Any help or tips are appreciated.
Thanks.
Related
I have an image that I want to stay on screen for 5 seconds and then change to another image for .5 of a second and then change back to the original.
I've set the interval to change every 5 seconds but I can't seem to work out how to make it change for the according times.
Any help or direction would be greatly appeciated!
window.setInterval(function() {
var img = document.getElementById("glitch");
img.src = "2-01.svg";
}, 5000);
Try this:
const images = ["1.svg", "2.svg"]
var element = document.getElementById("glitch");
function showFirst() {
setTimeout(() => {
element.src = images[0];
showSecond()
}, 5000)
}
function showSecond() {
setTimeout(() => {
element.src = images[1];
showFirst()
}, 500)
}
showFirst()
You are always changing the image src to same "2-01.svg" every time. Please use some flag/condition to alternate the image src.
Here is what you can try ::
window.setInterval(function() {
var img = document.getElementById("glitch");
if(img.src == "2-01.svg") {
img.src = "2-00.svg"
}
else {
img.src = "2-01.svg";
}
}, 5000);
I was doing some test watching the thread.
If that can help you (this is not a clean code) :
img_to_change = document.querySelector("#glitch");
imgs = {"a":10, "b":2, "c":3}
keys = Object.keys(imgs)
run = function(i){
img_src = keys[i];
img_next_time = imgs[keys[i]];
img_to_change.src = img_src;
i = (i+1) == keys.length ? -1 : i;
setTimeout(() => {
img_to_change.src = img_src;
run(i+1);
}, img_next_time*1000)
}
run(0);
http://jsfiddle.net/pn3dyb5m/32/
I'm having an issue where I'm using this plugin:
I have created an abstract with the following code, and trying to read from the default <audio> and not the plugin. The plugin puts a visibility:hidden on the <audio> tag but I don't think that should affect anything.
Here's my code, it's for a slideshow, displaying images at certain intervals in the audio file:
var audio = $("audio");
audio.audioPlayer();
// Slideshow
var slideshowAudio = audio.data("slideshow"),
slideshowAudioId = document.getElementById("audio-default");
if (slideshowAudio == "1") {
var audioTime = Math.floor(slideshowAudioId.currentTime);
// console.log("Current Time: " + currentTime);
var slideshow = [];
$(".slideshow li").each(function () {
var id = $(this).data("slideshow-id"),
time = $(this).data("slideshow-time");
slideshow.push(time);
});
console.log(slideshow);
$(".audioplayer-playpause").on("touchend click", function () {
setInterval(function() {
alert("show " + audioTime);
for (i = 0; i < slideshow.length; i++) {
if (slideshow[i] == currentTime) {
}
}
}, 1000);
});
}
So this is part 2 of my previous question (was advised to start a new question for this one).Just for reference here is my previous post: Dots for Children in div. A jQuery headache
My question now is: How does one go about adding an "active" class/id to the "imgdots" div for styling purposes?For example:Say I'm on image 4 then I want the 4th "imgdots" div to be another colour.Again, any help would be much appreciated! EDITI have set up a fiddle containing what I have thus far. The initial image slider was from a tutorial I followed and kinda pieced it all together from there. Here is the link: jsfiddle.net/Reinhardt/cgt5M/8/
Have you seen nth child css?
http://www.w3schools.com/cssref/sel_nth-child.asp
#showContainer:nth-child(4)
{
background:#ff0000;
}
Try
/* The jQuery plugin */
(function ($) {
$.fn.simpleShow = function (settings) {
var config = {
'tranTimer': 5000,
'tranSpeed': 'normal'
};
if (settings) $.extend(config, settings);
this.each(function () {
var $wrapper = $(this),
$ct = $wrapper.find('.showContainer'),
$views = $ct.children();
var viewCount = $views.length;
var $imgdotholder = $('<div class="imgdotholder"></div>').appendTo('.wrapper');
for (var i = 0; i < viewCount; i++) {
$('<div class="imgdots"></div>').appendTo($imgdotholder);
}
var $imgdots = $imgdotholder.children();
var timer, current = 0;
function loop() {
timer = setInterval(next, config.tranTimer);
}
function next(idx) {
$views.eq(current).hide();
current = idx == undefined ? current + 1 : idx;
if (isNaN(current) || current < 0 || current >= viewCount) {
current = 0;
}
$views.eq(current).fadeIn(config.tranSpeed);
$imgdots.removeClass('current').eq(current).addClass('current');
}
$imgdots.click(function(){
clearInterval(timer);
next($(this).index());
})
$wrapper.find('.btn_nxt').click(function(){
clearInterval(timer);
next();
});
$ct.hover(function(){
clearInterval(timer);
}, loop);
$views.slice(1).hide();
$imgdots.eq(0).addClass('current');
loop();
});
return this;
};
})(jQuery);
/* Calling The jQuery plugin */
$(document).ready(function () {
/**/
$(".wrapper").simpleShow({
'tranTimer': 3000,
'tranSpeed': 800
});
});
Demo: Fiddle
After calling a PHP function, which generates the HTML,
I call the function below for the specific slider id.
That works fine, hover pauses the slideshow, also ok.
But when I am hovering out of the section, firebug gives the following error:
TypeError: o.handler.apply is not a function
And the slideshow won't continue.
Thanks in advance.
function CallSlider(sliderid){
var $slider = $('#'+sliderid);
var $slide = 'li';
var $transition_time = 1000; // 1 second
var $time_between_slides = 2000; // 4 seconds
function slides(){
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
$('#'+sliderid).hover(function() {
clearInterval(sliderid);
}, sliderid = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();
//alert('test');
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
, $transition_time + $time_between_slides
)
);
}
I believe that error is related to the fact that hover() expects parameters to be functions.
Type: Function() - A function to execute when the mouse pointer enters/leaves the element.
http://api.jquery.com/hover/
I suggest putting your "hover off" code in its own function, like so:
$('#'+sliderid).hover(
function() {
// hover over
clearInterval(sliderid);
},
function () {
// hover off
sliderid = setInterval(...);
}
);
EDIT:
Here's an example, based on the code you provided, of how to keep things flexible (i.e. for dynamic lists).
var slide = 'li';
var transition_time = 1000; // 1 second
var time_between_slides = 2000; // 4 seconds
function startCycle($slider, $slides) {
return setInterval(
function () {
var $thisslide=jQuery(slide+'.active',$slider);
var $nextslide=($thisslide.next(slide).length?$thisslide.next(slide):$slides.eq(0));
$thisslide.removeClass('active').fadeOut(transition_time);
$nextslide.fadeIn(transition_time).addClass('active');
}, transition_time + time_between_slides
);
}
jQuery('ul.slider').each(function () {
var sliderid;
var $slider = jQuery(this);
var $slides = $slider.find(slide);
$slides.fadeOut();
// set active classes
$slides.first().addClass('active').fadeIn(transition_time);
$slider.hover(
function () {
// hover over
clearInterval(this.sliderid);
},
function () {
// hover off
this.sliderid = startCycle($slider, $slides);
}
);
this.sliderid = startCycle($slider, $slides);
});
http://jsfiddle.net/gk74V/1/
I have an image preloading script which is slightly modified version of this one form nettuts : http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/
The problem I am having is that the preload background gif isnt working on images that are floated?
// JavaScript Document
$.fn.preloader = function(options){
var defaults = {
delay:20000,
preload_parent:"span",
check_timer:300,
ondone:function(){ },
oneachload:function(image){ },
fadein:500
};
// variables declaration and precaching images and parent container
var options = $.extend(defaults, options),
root = $(this) , images = root.find("img").css({"visibility":"hidden",opacity:0}) , timer , counter = 0, i=0 , checkFlag = [] , delaySum = options.delay ,
init = function(){
timer = setInterval(function(){
if(counter>=checkFlag.length)
{
clearInterval(timer);
options.ondone();
return;
}
for(i=0;i<images.length;i++)
{
if(images[i].complete==true)
{
if(checkFlag[i]==false)
{
checkFlag[i] = true;
options.oneachload(images[i]);
counter++;
delaySum = delaySum + options.delay;
}
$(images[i]).css("visibility","visible").delay(delaySum).animate({opacity:1},options.fadein,
function(){ $(this).parent().removeClass("preloader"); });
}
}
},options.check_timer)
} ;
images.each(function(){
if($(this).parent(options.preload_parent).length==0)
$(this).wrap("<span class='preloader' />");
else
$(this).parent().addClass("preloader");
checkFlag[i++] = false;
});
images = $.makeArray(images);
var icon = jQuery("<img />",{
id : 'loadingicon' ,
src : 'css/i/89.gif'
}).hide().appendTo("body");
timer = setInterval(function(){
if(icon[0].complete==true)
{
clearInterval(timer);
init();
icon.remove();
return;
}
},100);
}
$(function () {
$("#righthalf").preloader();
$("#portright").preloader();
$("#timeline").preloader();
$("#type").preloader();
})
Any ideas guys?