I don't know how much people have used this plugin, demo but what I want is to change the default behavior of the plugin to something like animated. Currently, when you click on next or previous button, the images will be just appended without any visual animation. I just want to animate the images while appending! Can anybody suggest any good solution!! Below is the code where appending on the image takes place:
if (href.match(/\.(jpeg|jpg|gif|png)$/i) !== null) {
var img = $('<img>', { src: href });
img.one('load', function () {
var wrap = $('<div class="nivo-lightbox-image" />');
wrap.append(img); //gets appended here
content.html(wrap).removeClass('nivo-lightbox-loading');
// Vertically center images
wrap.css({
'line-height': $('.nivo-lightbox-content').height() + 'px',
'height': $('.nivo-lightbox-content').height() + 'px' // For Firefox
});
}).each(function () {
if (this.complete) $(this).load();
});
}
OK with any sort of animation
Well I just added a fadeIn after appending which seems to do some sort of animation although which is what I was accepting. Here is what I did:
wrap.append(img).fadeIn('4000');
Related
I'm pretty new with Jquery. I would like that my animations with Wow.js could run more than once time. For instance: i scroll to the bottom of my page and see all the animations, and if i scroll back to the top i see again the animations like when you scroll down. I hope that I explained myself. I have already seen many websites that repeats the animations on theirs pages but unfortunately I don't remember them and I can't provide a link.
I have already tried this:
$(window).scroll(function(){
new WOW().init();
}
But it repeat the animations also if you scroll a little and it's pretty ugly to see. I try to explain me better: I have a with my animation and if it is focused the animation is triggered, then i scroll down to another div and the previous div is no more visible(not in the window viewport), then again i scroll back to my div with animation and the animation is triggered again.
I'm sorry for this messy question but I really don't know how to explain it.
Thanks in advance!
This example by Benoît Boucart shows how the animation can be "reset" when the user scrolls out of view and back in. The key here is the second function that removes the animation css class when the element scrolls out of view. I wish WOW.js would implement this, but they've indicated that they don't plan to.
http://codepen.io/benske/pen/yJoqz
Snippet:
// Showed...
$(".revealOnScroll:not(.animated)").each(function () {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded > offsetTop) {
if ($this.data('timeout')) {
window.setTimeout(function(){
$this.addClass('animated ' + $this.data('animation'));
}, parseInt($this.data('timeout'),10));
} else {
$this.addClass('animated ' + $this.data('animation'));
}
}
});
// Hidden...
$(".revealOnScroll.animated").each(function (index) {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded < offsetTop) {
$(this).removeClass('animated fadeInUp flipInX lightSpeedIn')
}
});
If a user wants to repeat the animation on both the events i.e.
onScrollUp
onScrollDown
then this will be a good solution for it:
First create an addBox function, it will help to push new elements into the WOW boxes array.
WOW.prototype.addBox = function(element){
this.boxes.push(element);
};
Then use jQuery and scrollspy plugin that helps to detect which element is out of the view and then push WOW as:
$('.wow').on('scrollSpy:exit',function(){
var element = $(this);
element.css({
'visibility' : 'hidden',
'animation-name' : 'none'
}).removeClass('animated');
wow.addBox(this);
});
Solution Courtesy: ugurerkan
Answer by #vivekk is correct I m just adding a working example so that people can easily get this
see the Demo fiddle
<script>
// Repeat demo content
var $body = $('body');
var $box = $('.box');
for (var i = 0; i < 20; i++) {
$box.clone().appendTo($body);
}
// Helper function for add element box list in WOW
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
// Init WOW.js and get instance
var wow = new WOW();
wow.init();
// Attach scrollSpy to .wow elements for detect view exit events,
// then reset elements and add again for animation
$('.wow').on('scrollSpy:exit', function() {
$(this).css({
'visibility': 'hidden',
'animation-name': 'none'
}).removeClass('animated');
wow.addBox(this);
}).scrollSpy();
</script>
This may be a little too specific, but I have a jquery slider that I am using <p> classes instead of images to cycle through customer quotes. Basically the problem I am running into right now is when it is static and non moving (JS code is commeneted out) they are aligned how I want them to be. As soon as the JS is un commented, they stretch out of view and you just see a white box?
Any ideas?
How I want each panel to look like:
jsfiddle
So I sort of made this my Friday project. I've changed a whole lot of your code, and added a vertical-align to the quotes and authors.
Here's the fiddle http://jsfiddle.net/qLca2fz4/49/
I added a whole lot of variables to the top of the script so you could less typing throughout.
$(document).ready(function () {
//rotation speed and timer
var speed = 5000;
var run = setInterval(rotate, speed);
var slides = $('.slide');
var container = $('#slides ul');
var elm = container.find(':first-child').prop("tagName");
var item_width = container.width();
var previous = 'prev'; //id of previous button
var next = 'next'; //id of next button
Since you used a % based width I'm setting the pixel widths of the elements in case the screen is reszed
slides.width(item_width); //set the slides to the correct pixel width
container.parent().width(item_width);
container.width(slides.length * item_width); //set the slides container to the correct total width
As you had, I'm rearranging the slides in the event the back button is pressed
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
I combined the prev and next click events into a single function. It checks for the ID of the element targeted in the click event, then runs the proper previous or next functions. If you reset the setInterval after the click event your browser has trouble stopping it on hover.
//if user clicked on prev button
$('#buttons a').click(function (e) {
//slide the item
if (container.is(':animated')) {
return false;
}
if (e.target.id == previous) {
container.stop().animate({
'left': 0
}, 1500, function () {
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
});
}
if (e.target.id == next) {
container.stop().animate({
'left': item_width * -2
}, 1500, function () {
container.find(elm + ':last').after(container.find(elm + ':first'));
resetSlides();
});
}
//cancel the link behavior
return false;
});
I've found mouseenter and mouseleave to be a little more reliable than hover.
//if mouse hover, pause the auto rotation, otherwise rotate it
container.parent().mouseenter(function () {
clearInterval(run);
}).mouseleave(function () {
run = setInterval(rotate, speed);
});
I broke this in to its own function because it gets called in a number of different places.
function resetSlides() {
//and adjust the container so current is in the frame
container.css({
'left': -1 * item_width
});
}
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin :)
And here's your rotation timer.
function rotate() {
$('#next').click();
}
It took me a little bit, but I think I figured out a few things.
http://jsfiddle.net/qLca2fz4/28/
First off, your console was throwing a few errors: first, that rotate wasn't defined and that an arrow gif didn't exist. Arrow gif was probably something you have stored locally, but I changed the 'rotate' error by changing the strings in the code here to your actual variables.
So, from:
run = setInterval('rotate()', speed);
We get:
run = setInterval(rotate, speed);
(No () based on the examples here: http://www.w3schools.com/jsref/met_win_setinterval.asp)
But I think a more important question is why your text wasn't showing up at all. It's because of the logic found here:
$('#slides ul').css({'left' : left_value});
You even say that this is setting the default placement for the code. But it isn't..."left_vaule" is the amount that you've calculated to push left during a slide. So if you inspect the element, you can see how the whole UL is basically shifted one slide's worth too far left, unable to be seen. So we get rid of 'left_value', and replace it with 0.
$('#slides ul').css({'left' : 0});
Now, there's nothing really handling how the pictures slide in, so that part's still rough, but this should be enough to start on.
Let me know if I misunderstood anything, or if you have any questions.
So, a few things:
1) I believe you are trying to get all of the lis to be side-by-side, not arranged up and down. There are a few ways to do this. I'd just make the ul have a width of 300%, and then make the lis each take up a third of that:
#slides ul {
....
width: 300%;
}
#slides li {
width: calc(100% / 3);
height:250px;
float:left;
}
2) You got this right, but JSFiddle automatically wraps all your JS inside a $(document).ready() handler, and your function, rotate needs to be outside, in the normal DOM. Just change that JSFiddle setting from 'onload' to 'no wrap - in head'
3) Grabbing the CSS value of an element doesn't always work, especially when you're dealing with animating elements. You already know the width of the li elements with your item_width variable. I'd just use that and change your code:
var left_indent = parseInt($('#slides ul').css('left')) - item_width;
$('#slides ul').animate({'left' : left_indent}, 1500, function () {
to:
$('#slides ul').stop().animate({'left' : -item_width * 2}, 1500, function () {
4) Throw in the .stop() as seen in the above line. This prevents your animations from overlapping. An alternative, and perhaps cleaner way to do this, would be to simply return false at the beginning of your 'next' and 'prev' functions if #slides ul is being animated, like so:
if ($('#slides ul').is(':animated')) return false;
And I think that's everything. Here's the JSFiddle. Cheers!
EDIT:
Oh, and you may also want to clearInterval at the beginning of the next and prev functions and then reset it in the animation callback functions:
$('#prev').click(function() {
if ($('#slides ul').is(':animated')) return false;
clearInterval(run);
$('#slides ul').stop().animate({'left' : 0}, 1500,function(){
....
run = setInterval('rotate()', speed);
});
});
Fairly new to JavaScript and very new to jQuery. Can someone have a look at the following code and see where I am going wrong.
This is the main part of the jQuery code:
$(document).on("hover", ".crrightcontainer img", function() { /* trigger event on hover on an img in class crrightcontainer */
var src = $(this).attr('src'); // get full path and filename from thumbnail
var index = src.lastIndexOf('/') + 1; // get index to last occurrenace of file path delimiter "/"
var fullsizeimgname = src.substr(index); // get actual filename only i.e. "cs1.jpg"
fullsizeimgname = "/painted/fp-images/" + fullsizeimgname; // add path to give full path to the full sized image.
$('.crleftcontainer img').animate({opacity: 0.0},1000); // fade out old full size image
$('.crleftcontainer img').attr("src",fullsizeimgname).animate({opacity: 1.0},1000); // set full size image in browser and fade in
});
http://jsfiddle.net/deanflyer/CfxyJ/1
It works, it just seems to fire off multiple mouse events. Just move the mouse a few times over the thumbnail images and youll see what I mean, giving multiple fades.
I've tried using .stop() on the main image with animate() but this just stops everything.
Many Thanks.
Is something like this your requirement try this: http://jsfiddle.net/CfxyJ/13/
$('.crrightcontainer img').css('opacity', 0.7);
$('.crrightcontainer img').mouseenter(function () {
$(this).stop().animate({opacity: 1.0}, 600);
var src = $(this).attr('src');
var index = src.lastIndexOf('/') + 1;
var fullsizeimgname = src.substr(index);
fullsizeimgname = "http://thepaintedtree.co.uk/fp-images/" + fullsizeimgname;
$('.crleftcontainer img').fadeOut('slow', function(){
$('.crleftcontainer img').attr("src", fullsizeimgname).fadeIn('slow');
});
});
$('.crrightcontainer img').mouseleave(function () { //fadeout
$(this).stop().animate({
opacity: 0.7
}, 600);
});
Try using mouseenter event. See updated fiddle http://jsfiddle.net/CfxyJ/25/. Is it what you are looking for?
I currently use the following to fade images on my site:
$(document).ready(function() {
$('ul.image-switch li').mouseover(function(e) {
if (e.target.nodeName.toLowerCase() == 'a') return;
var image_src = $('a', this).data('image');
var img = $('.image-container img');
if (img.attr('src') != image_src) { // only do the fade if other image is selected
img.fadeOut(200, function() { // fadeout current image
img.attr('src', image_src).fadeIn(200); // load and fadein new image
});
}
});
});
An example of this in action is at http://www.sehkelly.com/#news.
As you can see, the current image must fade out before the new one fades in.
I'd like the action to be simulaneous. Please -- does anyone know how I can achieve this?
Many thanks.
EDIT: Clueless novice. Code examples very much appreciated.
Create a new img element on top of the actual one, then fadeIn this new image. You'll need a bit of css to put the new image on top of the old one.
In no way you can do that with only one img element.
if (img.attr('src') != image_src) { // only do the fade if other image is selected
img.after(
$('<img />').attr('src', image_src).fadeIn(200)
);
img.fadeOut(200);
}
You would too want to wait for the new image to be loaded before starting fades. (checkout jQuery doc for the right function for that, and fade the images in the load callback).
Here's an implementation of Ulflander's idea, since the code posted is not complete http://jsfiddle.net/8nBqD/1/
The trick is to absolutely position the second image on top of the one you're fading out
HTML
<img id='pic1' src="http://periodictable.com/Samples/009.3b/s7.JPG" />
<img id='pic2' src="http://icons.iconarchive.com/icons/vargas21/aquave-metal/256/Sample-icon.png" />
CSS
#pic2 {
position: absolute;
display: none;
}
JS
// Fade out the image, and replace it with the new one after the fade is over
$("#pic1").fadeOut(500, function() { // fadeout current image
this.src = 'http://icons.iconarchive.com/icons/vargas21/aquave-metal/256/Sample-icon.png';
$(this).show();
});
// Fade in the new image placing it on top of the original one
$("#pic2").offset($("#pic1").offset()).fadeIn(500, function(){
// Hide it since we are showing the original image with the new src
$(this).hide();
});
We could even write a plugin to make this easy to reuse
(function($) {
$.fn.imageFader = function(newSrc, seconds) {
$(this).each(function() {
var $img = $(this);
$img.fadeOut(seconds, function() {
this.src = newSrc;
$img.show();
});
var $tempImg = $('<img src="'+newSrc+'" style="position:absolute;display:none;" />').appendTo('body');
$tempImg.offset($img.offset()).fadeIn(seconds, function(){
$tempImg.remove();
});
});
};
})(jQuery);
And use it like http://jsfiddle.net/8nBqD/5/
$('img').imageFader('picture.png', 1000);
I've got quite the problem with jQuery and a custom photo gallery I am building. I've searched high and low and tried endlessly different solutions but nothing is working perfectly. So let me present the information:
This photo gallery has thumbnails on the left side and a big image in the center. Every thumbnail can be clicked which calls a function passing in its' ID. What I want it to do is, AJAX POST to server to get image comment and image name. Fadeout the current big picture div, switch the src in the img tag, get the new image's width, set the width of an overlaying comment div, fadeIn the big picture div.
The problem is that I can't get the width of the new image after it has loaded (even using the a form of .load() to wait for the image to finish loading). Now I can get it to work when I fadeIn the new image and then get the width but that isn't what I need. I need to get the width and set the div's width before I fadeIn.
Any ideas or corrections would be great, hopefully I have provided enough information.
Here is the code I am wrestling with:
function thumbClick(val) {
$.post('ajax.php', {
photo_in: val
}, function (data) {
$('div#picture').fadeOut('slow', function () {
//$('img#big-picture').load(function(){
$('img#big-picture').one('load', function () {
//alert($('img#big-picture').width());
//will alert 0
$('div#picture').fadeIn('slow', function () {
$('div#comment-box').width($('img#big-picture').width());
//set comment to what I want
$('p#comment').html("");
//alert($('img#big-picture').width());
//will alert new image width after FadeIN
$('p#comment').html(data.comment);
});
}); //end of one(load)
$('img#big-picture').attr("src", data.newImage);
}); //end of fadeout
}, "json"); //end of post
}
I've encountered this before; what seems to be the easiest solution is to quickly show the image, grab it's width, and hide it again. This operation occurs so quickly users will never notice.
In your case, i believe the code would be:
$("#big-picture").show();
alert($('#big-picture').width()); //this should be the real width, now
$("#big-picture").hide();
The width is zero because hidden elements (elements with display: none have, by definition, zero height and width). After fadeOut(), jQuery hides the element(s). A few different solutions:
Use .fadeTo(), not .fadeOut():
$('#picture').fadeTo('slow', 0, function () {
var $pic = $(this);
$('#big-picture').one('load', function () {
var $bigPic = $(this);
$pic.fadeIn('slow', function () {
$('#comment-box').width($bigPic.width());
$('#comment').html(data.comment);
});
}).attr('src', data.newImage);
});
Use a separage <img> element:
$('#picture').fadeOut('slow', function () {
var $pic = $(this);
$('#big-picture').one('load', function () {
var img = new Image(),
width;
img.src = this.src;
width = img.width;
$pic.fadeIn('slow', function () {
$('#comment-box').width(width);
$('#comment').html(data.comment);
});
}).attr('src', data.newImage);
});
Use the "off-left" technique:
CSS
.off-left {
position: absolute;
left: -99999px;
}
JavaScript
$('#picture').fadeOut('slow', function () {
var $pic = $(this);
$('#big-picture').one('load', function () {
var $this = $(this),
width = $this.addClass('off-left').show().width();
$this.removeClass('off-left').hide();
$('#picture').fadeIn('slow', function () {
$('#comment-box').width(width);
$('#comment').html(data.comment);
});
}).attr('src', data.newImage);
});
Notes
When using an ID selector, there's no point in qualifying the selector further, since element IDs must be unique.
Pick a quote style and use it consistently. Avoid mixing single- and double-quotes as string delimiters.
You should be able to set the CSS property visibility to hidden and then get the width, as visibility doesn't take it out of the document flow (like display: none), but simply makes it invisible. Just make sure you set the visibility property back to visible when you fade in.