Develop Reference

jQuery link with roll down image

I'm trying to put an .animate in a function to show more of an image when you hover over it. So far I only managed to roll down the entire div element, somehow I can't figure out how to talk to each individual image. This is what I have.
HTML:
<div class="social">
<img src="xxx" alt="xxx">
<img src="xxx" alt="xxx">
<img src="xxx" alt="xxx">
</div>
CSS:
.social{
position: fixed;
top: -91px;
right: 10%;
}
.social img{
width: 25px;
margin: 0 5px 0 0;
}
javaScript/jQuery (works if I change $('.social a img') to $('.social')):
$(document).ready(function () {
$('.social a img').hover(function ( ){
$(this).animate({top:'0px'});
});
});

multiple lightbox gallery on one page

how can i fix this? when i click "smile" it appears smile but when i click sad it also appear a smiley face.
SMILE<br>
<div id="light"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/1024px-Smiley.svg.png" width=100 height=100></div>
SAD
<div id="light"><img src="http://www.clipartbest.com/cliparts/MiL/kkB/MiLkkBAia.png" width=100 height=100></div>
<div id="fade" onClick="lightbox_close();"></div>
CSS: fade for the close and light is for the the lightbox.
#fade{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
#light{
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
padding: 10px;
border: 2px solid #FFF;
background: #CCC;
z-index:1002;
overflow:visible;
javascript: for the open and close function
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';

You cannot use the same ID twice. You must use unique ID's.
Try this:
In the HTML, give your two light divs each a unique ID, for example lightSmile and lightSad.
In order to be able to use the same CSS for both lightboxes, give both boxes a class lightbox, and in the CSS, change the #light to .lightbox.
Finally, change the lightbox_open() function to the one below here.
HTML
SMILE<br>
<div class="lightbox" id="lightSmile"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/1024px-Smiley.svg.png" width=100 height=100></div>
SAD
<div class="lightbox" id="lightSad"><img src="http://www.clipartbest.com/cliparts/MiL/kkB/MiLkkBAia.png" width=100 height=100></div>
<div id="fade" onClick="lightbox_close();"></div>
CSS
.lightbox{
display: none;
...
}
JS
function lightbox_open(id){
window.scrollTo(0,0);
document.getElementById(id).style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('lightSmile').style.display='none';
document.getElementById('lightSad').style.display='none';
document.getElementById('fade').style.display='none';
}
If you look at the HTML, you see that now a string of the lightbox's ID is send along when lightbox_open() is called.
In the function, this ID-string is supplied as a variable (between the brackets: id). And in the line where lightbox's display-style is changed, this id is used.
In the close-function, the display-style of both the lightbox's is set back to default.
UPDATE
If you have a lot of lightboxes, it's easier to access the lightboxes by classname in the close-function:
function lightbox_close(){
var list = document.getElementsByClassName('lightbox');
for (var i=0; i<list.length; i++) {
list[i].style.display = 'none';
}
document.getElementById('fade').style.display='none';
}
And if you're willing to use jQuery, you can do that with one line (and probably more reliably cross-browser):
function lightbox_close(){
$('.lightbox').css('display','none'); //<--------------jQuery
document.getElementById('fade').style.display='none';
}

How to pause a Slideshowify slideshow on mouseenter?

I am using a jQuery plugin called Slideshowify. Unfortunately, it doesn't come with many options or functions, so I have been forced to attempt to create my own pause and play with mouse enter/leave.
As seen below, I have managed to stop the animating simply using .stop() on mouseenter, but I have not yet managed to find a way to play the animation from its current state after mouseleave.
How can I achieve this?
HTML:
<div id="slideshow">
<img src="http://lorempixel.com/output/city-h-c-320-500-2.jpg" />
<img src="http://lorempixel.com/output/food-h-c-320-500-9.jpg" />
<img src="http://lorempixel.com/output/abstract-h-c-320-500-10.jpg" />
</div>
CSS:
#slideshow {
background-color: #ffffff;
position: relative;
width: 320px;
height: 320px;
border: 1px solid #ffffff;
z-index: 10;
}
JS:
$('#slideshow img').slideshowify({
parentEl: '#slideshow'
});
$("#slideshow").on('mouseenter', function () {
$(this).find('div > img').stop(true, false);
});
WORKING DEMO

how I can give link to slide to redirect to other page

I am creating a slide show in with help of Jquery as below.I am able to get the slide show .But I am not able to give the link to each slide using href
Plseae help me .
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.fade {
position: relative;
width: 650px;
height: 373px;
}
.fade img {
position: absolute;
left: 0;
top: 0;
width: 650px;
height: 373px;
}
</style>
<script>
$(function () {
$('.fade img:gt(0)').hide();
setInterval(function () {
$('.fade :first-child').fadeOut(3000)
.next('img').fadeIn(3000).end()
.appendTo('.fade');
}, 4000);
});
</script>
<div class="fade" style="width: 603px; height: 373px; z-index: 1; border-radius: 10px 10px 10px 10px; left: 295px; top: 224px; position: absolute">
<img src="images/SAM_0043.JPG" href="www.xyz.com" >
<img src="images/SAM_0047.JPG" href="www.xyz.com" >
<img src="images/SAM_0044.JPG" href="www.xyz.com" >
</div>
</body>

Try
<img src="images/SAM_0043.JPG" >
img tag has no href attribute.
wrap img tag with a tag n give href
Or with jQuery using your current code wrap a tag around img
fiddle Demo
$('div.fade img').wrap(function () {
return '';
});

embed the img tag into the anchor tag, and provide the href="" to the anchor tag. Your work is done.

href is not an img tag attribute so better to change the html to
<img src="" />
and if you dont want to change your html you can use code below to redirect to links on click on images
$(".fade img").bind('click',function(){
window.location = $(this).attr("href");
});

Mouseover Change Image Color

I have a big grid of images. When a user mouseovers an image I want the image to tint blue 0000FF. Is there a way to do this in JS or jquery? Ideally, I wouldn't have to apply a class to each image. This treatment should affect all images on the screen.
After searching the forums here and elsewhere I learned that some folks use a div over the image that has a color and opacity, but how would I apply that to all img?
Another thing I keep seeing is paintbrushJS and pixastic but I don't know how to make those work for this purpose.
Here's the page I'm working on:
http://www.rollinleonard.com/elements/
EDIT: the images need to be be clickable so the div can't obstruct the linked img. Is there a way to click through the div or put the div below or something? Some solutions offered don't use a div but I can't figure them out.
Thanks!
Rollin

This is how you're gonna want to do it: http://jsfiddle.net/ztKJB/1/
Javascript / jQuery:
$overlay = $('#overlay');
$('img').bind('mouseenter', function () {
$this = $(this);
if ($this.not('.over')) {
$this.addClass('over');
$overlay.css({
width : $this.css('width'),
height : $this.css('height'),
top : $this.offset().top + 'px',
left : $this.offset().left + 'px',
}).show();
}
}).bind('mouseout', function () {
$(this).removeClass('over');
});
CSS:
#overlay {
display: block;
position: absolute;
background-color: rgba(0, 0, 255, 0.5);
top: 0px;
left: 0px;
width: 0px;
height: 0px;
}
HTML:
<div id="overlay"></div>
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/rgb-dots-olan3.jpg" width="150" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/rgb-dots-olan2.jpg" width="150" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/IMG_3291.jpg" width="225" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/1153-1188.jpg" width="200" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/P1010036.jpg" width="200" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/dressRehearsal.jpg" width="267" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/sinWave.jpg" width="225" height="150"
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/mockUp2.jpg" width="225" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/PICT0453.jpg" width="113" height="150">

The idea of using a div over the image would work. You can generate the div on-the-fly as needed (or generate a hidden div to reuse throughout the page), and position it over the image during the onmouseover event:
$('img').mouseover(function() {
// generate a div
// position over current image
});

Append a span inside each anchor, and adjust it's opacity on hover:
<script>
$(function() {
$('a').each(function() {
$(this).appendChild('<span class="overlay" />');
});
});
</script>
<style>
a {
position: relative;
}
a .overlay {
background-color: #00f;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
}
a:hover .overlay {
opacity: 0.4; /* adjust to suit */
}
</style>
Note: you'll need to adjust your styles so the anchors are being floated rather than the images.
If you wanted a fade in/out, you could either use CSS3 transitions or hide the span initially and use a jQuery mouseover event to fade it in:
$('a').each(function() {
$(this).appendChild($('<span class="overlay" />').hide()).hover(function() {
$(this).find('.overlay').fadeIn(500);
}, function() {
$(this).find('.overlay').fadeOut(1000);
});
});

This jquery plugin should do the thing you asked pretty well. (tancolor.js)
$("#myImageID").tancolor({mode: "blue"});
There's an interactive demo. You can play around with it.
Check out the documentation on the usage, it is pretty simple. docs