Develop Reference

nivo-lightbox plugin slideIn images onclick of next or previous

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');

Load various size images in a fancybox

I have 5-6 images with various sizes like width from 1000px to 1048px and height from 593px to 1736px. But its not loading small images. I tried to pass the width & height but its not working.
HTML
<a class="fancybox" href="images/press/creating websies for NGOS.png" data-fancybox-group="gallery" title="Creating websites for NGOs" data-width="1048" data-height="593">
<img src="images/press/creating websies for NGOS.png" style="border:0" alt="">
</a>
JQUERY
$(".fancybox").fancybox({
beforeShow: function () {
this.width = $(this.element).data("width");
this.height = $(this.element).data("height");
}
});
So how do it. It will load as per the width & height passed from html. Any idea guys ?

The Problem
Your current URL is
http://firstplanet.in/about/feature.php/
and your images are linked to
images/press/commitment to unemployment.png
which gets expanded to
http://firstplanet.in/about/feature.php/images/press/creating%20websies%20for%20NGOS.png
change your image links to
/about/images/press/commitment to unemployment.png
to get them working.
More Info
Read this article on relative URLs. Here is an excerpt.
Not prepending a /
If the image has the same host and the same path as the base document:
http://www.colliope.com/birdpics/owl/pic01.jpg
http://www.colliope.com/birdpics/owl/page.html
We would write < img src="pic01.jpg" >
Prepending a /
If the image has the same host but a different path:
http://www.colliope.com/gifs/groovy14/button.gif
http://www.colliope.com/birdpics/owl/page.html
We would write < img src="/gifs/groovy14/button.gif" >

Part of the problem is the context of this being lost.
Whenever we use this in a function, the context of this takes that function.
So we can assign it early : var $this = $(this);
Edit: Perhaps this.element is a fancybox way to get the element, I don't know, if so, I'm wrong. Nontheless, here's what we can do , if you want to make use of those data height and width attributes:
$('a.fancybox').on('click', function (e) {
e.preventDefault(); /* stop the default anchor click */
var $this = $(this); /* register this */
$.fancybox({
'content': $this.html(), /* the image in the markup */
'width': $this.attr("data-width"),
'height': $this.attr("data-height"),
'autoDimensions': false,
'autoSize': false
});
});
Try this out here
Also some CSS will help keep the fancybox frame from scrolling ( for this direct image usage )
.fancybox-inner img {
display:block;
width:100%;
height:100%;
}

Try
$.fancybox("<img src='images/press/creating_websies_for_NGOS.png' style='border:0'>");

jQuery Click event works only once (none of the previous Stack Overflow answers helped)

What I'm trying to do is that when the page loads I'm resetting an image to my desired small size.
If the user clicks on the image later it should enlarge with an animation, I'm done up to this part.
When the user again clicks on that image it should be resized to the size that I assigned after loading the page, I have tried toggle event, but that's not working, toggle just makes my images disappear from the page. So I created an alternate to toggle event by using if and else condition and a flag variable called "small" but the problem is that click event is working only once i.e: If the image is in the small size and I click on it, the image gets enlarged but when I click on it again the click event is fired but it doesn't work, I wish if there is any way that I could make it work with toggle event, otherwise I would like to do it by using if and else condition in click event.
Here's the HTML:
<html>
<head>
<title></title>
<script src="jquery-1.10.1.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<img src="wordpress.jpg" class="small-Img" id="test"> <br>
<img src="store.jpg" class="small-Img">
</body>
</html>
Here's the script:
$(document).ready(function() {
var small;
$('.small-Img').on('load',function(){
$(".small-Img").attr('width','200');
small=Number(1);
});
$('.small-Img').on('click',function () {
alert("event fired");
if(small==1){
var obj=$(this);
var originalWidth=obj[0].naturalWidth;
var originalHeight=obj[0].naturalHeight;
$(this).animate({ height: originalHeight, width: originalWidth }, 1000, function() { });
small=Number(0);
}
if(small==0){
$(".small-Img").attr('width','200');
small=Number(1);
}
});
});

Your code
$(".small-Img").attr('width','200');
sets a width attribute on the image, similar to <img src="url" width="200"> which probably doesn't result in a size change. Try
$('.small-Img').css('width','200px');
or animate the shrinking
$('.small-Img').animate({ width: '200px' }, 1000);
You may also get better results making small an attribute of your image rather than a property of the window object
jsfiddle

It sounds like the problem isn't that the event isn't fired multiple times, but that it doesn't enter your if statement. Try making small a boolean variable instead of a number, that way you can avoid all the == vs === messyness
EDIT:
Also, you probably want an else if so that it doesn't shrink once it enlarges on each click.

DEMO
for setting or getting css value we use .css() not .attr()
== only checks the value
=== checks the value and the datatype
$(document).ready(function () {
var small;
$('.small-Img').on('load', function () {
$(".small-Img").css('width', '200'); //changed attr to css
small = 1;
});
$('.small-Img').on('click', function () {
if (small === 1) { //changed == to ===
var obj = $(this);
var originalWidth = obj[0].naturalWidth;
var originalHeight = obj[0].naturalHeight;
$(this).animate({
height: originalHeight,
width: originalWidth
}, 1000, function () {});
small = 0;
}
if (small === 0) { //changed == to ===
$(".small-Img").css('width', '200'); //changed attr to css
small = 1;
}
});
});

How about first making "small" a data-attribute on the image itself? Not a big deal, but a little more convenient (IMHO). The next thing is, when you want to check the second click, you might consider doing an else if rather than just an if. Not sure if it makes a difference, but it is a clear logical differentiation, you can have one or the other -- not both. Third, if you animate the width back down, you might also animate the height, calculated by your small height divided by your original height times the original width. Seems to work, see it here: http://jsfiddle.net/snowMonkey/7nCMF/1/
$('.small-Img').css('width','200px').data("small", 1);
$('.small-Img').on('click',function () {
var that=this;
this.smallWidth = "200px";
this.smallHeight = (200/$(this)[0].naturalWidth) * $(this)[0].naturalHeight+"px";
if($(this).data("small")===1 ){
var obj=$(that);
var originalWidth=obj[0].naturalWidth;
var originalHeight=obj[0].naturalHeight;
$(that).animate({
height: originalHeight,
width: originalWidth
}, 1000, function() { });
$(that).data("small",0);
} else if($(this).data("small")===0){
$(that).animate({
width: that.smallWidth,
height: that.smallHeight
}, 1000, function(){}).data("small", 1);
}
});
Best of luck!

jquery .height() is not returning the real value after the append function just called

I am trying to vertically align middle some pics using jquery.
Here is my code
$(".scroll a").hover(function (evt) {
$("#box a").empty().append(
$('<img src='+this.href+' class="loadimg">')
);
vertical_align();
});
while the vertical align function is here
function vertical_align(){
var child = $(".loadimg").height();
var parent = $("#box").height();
var margin = (parent - child)/2;
$("#box a").children("img").css('margin-top', margin);
}
Now the problem i am facing is that when the page is loaded, the imageHeight gives zero and the margin of the pic becomes half of the parent height which mean that imageheight is returning zero. But this only happens for the first time hover on each image.

this happens probably because you're reading the height too early, when at the first request the image isn't fully loaded. You should wait the load (or complete, from the 2nd request of the same image) event for the image, like so
$(".scroll a").hover(function (evt) {
var node = $("#box a");
node.empty();
$('<img src='+this.href+' class="loadimg">')
.appendTo(node)
.one('load complete', function() {
vertical_align();
});
});

Implementing a Parameter to a plugin - Shows 'X' number of elements

The current plugin, shown below, scrolls the top-most div in a series of divs with the same class upwards, then removes it from the container, and appends it to the bottom of the series (within the container). This gives the illusion of a vertical slideshow.
$.fn.rotateEach = function ( opts ) {
var $this = this,
defaults = {
delay: 5000
},
settings = $.extend(defaults, opts),
rotator = function ($elems) {
$elems.eq(0).slideUp(500, function(){
var $eq0 = $elems.eq(0).detach();
$elems.parent().append($eq0);
$eq0.fadeIn();
setTimeout(function(){ rotator( $($elems.selector) ); },
settings.delay);
});
};
setTimeout(function(){ rotator( $this ); }, settings.delay);
};
$('.dynPanelContent').rotateEach();
However, if there are a large number of elements to scroll through, this would make for a VERY long page. As such, I am attempting to re-write this script so that it accepts a parameter which will determine how many elements to display. Any elements exceeding this number will be hidden until they are in the top 'x' number of elements. Here is an example of what I have attempted to implement.
$.fn.rotateEach = function (opts) {
var $this = this,
defaults = {
delay: 5000,
//Add a parameter named elementsShown, pass in a default value of 3
elementsShown: 3
},
settings = $.extend(defaults, opts),
rotator = function ($elems) {
//Hide the elements that are past the number to be shown
for (i = settings.elementsShown; i <= $elems.eq; i++) {
$elems.eq(i).hide();
}
$elems.eq(0).slideUp(500, function () {
var $eq0 = $elems.eq(0).detach();
var $eqN = $elems.eq(settings.elementsShown) - 1;
//Check & Show the element that is now within the show range
if ($elems.eq() == $eqN) {
$elems.eq($eqN).show('slow');
}
$elems.parent().append($eq0);
$eq0.fadeIn();
setTimeout(function () { rotator($($elems.selector)); },
settings.delay);
});
};

You can use simple CSS for this, mate.
If your elements are all of the same height (which your problem has to assume: if you are rotating a whole bunch of things dynamically, you won't want your page to change height), then you don't really need to use JavaScript for this at all. Just set the height of the container to what you want and hide the overflow. Then when you remove and append, everything appears to work. This won't take care of your dynamic configuration, though.

Improved plug-in: http://jsfiddle.net/morrison/tTJaM/
Notes:
Added support for showing X elements.
Added support for rotating only certain elements.
Added support for stopping the rotations:
Stop after X milliseconds.
Stop after X rotations.
overflow-y:hidden is added to container dynamically.
Simplified your detaching/attaching.
Known Issues:
Displaying X elements doesn't check for a maximum.