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

Scrolling image gallery without jQuery

I have a scrolling image gallery as follows. The CSS lays out the images in a row that scrolls horizontally. Underneath, I have a row of the same images, but as thumbnails. I want to be able to click on a thumbnail, and scroll the correct image into view.
HTML:
<div class="images_container">
<img id="image_1" src="/image1.jpg">
<img id="image_2" src="/image2.jpg">
<img id="image_3" src="/image3.jpg">
</div>
<div class="images_container thumbnails">
<img src="/image1.jpg" class="thumbnail">
<img src="/image2.jpg" class="thumbnail">
<img src="/image3.jpg" class="thumbnail">
</div>
CSS:
.images_container {
overflow-x: scroll;
overflow-y: hidden;
max-height: 50rem;
white-space: nowrap;
}
.images_container.thumbnails {
max-height: 10rem;
}
.images_container img {
vertical-align: top;
height: 50rem;
}
.images_container.thumbnails img {
height: 10rem;
}
This works up to a point, but jumping to the id of the image is problematic. If the larger image is even a few pixels into the visible viewport, it can't 'jump' to it, as it seems to be technically on the screen.
Is there a way I can use Javascript to 'scroll' the whole image into view when I click on it's corresponding thumbnail? I don't have access to jQuery on this project, but am happy to use JavaScript to make this work.

You can try this , no change in CSS, i add an id in html and call to scrollTo function :
<script>
function scrollTo(image_id){
var topLeft = document.getElementById(image_id).offsetTop;
document.getElementById('container').scrollLeft = topLeft;
}
</script>
<div id="container" class="images_container">
<img id="image_1" src="/image1.jpg" height="500px" width="500px">
<img id="image_2" src="/image2.jpg" height="500px" width="500px">
<img id="image_3" src="/image3.jpg" height="500px" width="500px">
</div>
<div class="images_container thumbnails">
<img src="/image1.jpg" class="thumbnail" onclick="scrollIntoView('image_1')">
<img src="/image2.jpg" class="thumbnail" onclick="scrollIntoView('image_2')">
<img src="/image3.jpg" class="thumbnail" onclick="scrollIntoView('image_3')">
</div>

To keep DOM cleaner I got this solution which requires only adding js
var elms = document.getElementsByClassName("thumbnail");
for (var i = 0; i < elms.length; i++) {
elms[i].onclick = function(event) {
event.preventDefault();
event.stopPropagation();
var id = this.parentNode.href.substr(this.parentNode.href.lastIndexOf('/') + 2);
var v = document.getElementById(id).getBoundingClientRect().left;
document.getElementsByClassName("images_container")[0].scrollLeft += v;
}
}
See on jsfiddle

Here's my attempt at a no (well, minimal) JS solution to a scrolling gallery. You could, in fact, remove the Javascript all together if you replaced the .active class with the :target pseudo-selector, allowing you to click your thumbnails to do the scrolling. It's just easier for me to do it this way through a fiddle
function removeClass(element, className) {
var classes = element.className.split(' ');
var key = classes.findIndex(function(name) {
return name == className
});
classes.splice(key, 1);
element.className = classes.join(' ');
}
function addClass(element, className) {
var classes = element.className.split(' ');
classes.push(className);
element.className = classes.join(' ');
}
setInterval(function() {
var current = document.querySelector('.images .image.active');
var next = current.nextElementSibling;
if (!next) {
next = document.querySelector('.images .image:first-child');
}
removeClass(current, 'active');
addClass(next, 'active');
}, 1500);
body {
margin: 0;
padding: 0;
width: 500px;
height: 500px;
}
.images {
width: 100%;
height: 100%;
position: relative;
overflow-x: hidden;
}
.image {
width: 100%;
height: 100%;
top: 0px;
position: absolute;
left: -100%;
float: left;
transition: 1s;
}
.image.active {
left: 0%;
}
.image.active ~ .image {
left: 100%;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
<div class='images'>
<div class='image black active'></div>
<div class='image red'></div>
<div class='image blue'></div>
<div class='image yellow'></div>
</div>
Essentially the way it works is by making the div.images container a certain height and width, and therefore all images inside it can be positioned as you want. We initially set all .image to left: -100%, so that they're completely off screen to the left. We then set .image.active as left: 0 so that it's on screen. We then use the ~ selector to say that all siblings that come after the current (.image.current ~ .image) should be left: 100%, so completely to the right. Add in a transition, and you have a completely CSS scrolling gallery. The JS only acts as a way to change what the current active image is, and you can replace that with :target if you want.
I used div's, instead of img tags because it's easier to provide a POC with div's and background colors, but it's worked well with images in the past. Just put an <img> tag inside those <div class='image'></div> tags

Jquery motion blur

I am working for a company and converting flash ad banners in html5.
I need to convert flash image which slides in from the left and at the same time it performs motion blur effect just like a windy effect.
I have converted slide in image but I am not sure how to add a windy effect.
Here is the car image I want to copy and this is my code jsfiddle
Thanks in advance.
HTML
<div id = "wrapper" >
<div id="mainContainer">
<div id="text">
<img id="Image_Car" src="http://i.share.pho.to/c43dc6d7_o.png" />
</div>
</div>
</div>
CSS
#wrapper {
left: 50px;
top: 50px;
width: 300px;
height:250px;
position: absolute;
}
#mainContainer {
background: url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');
width:300px;
height:250px;
overflow: hidden;
position: absolute;
}
#Image_Car {
position:absolute;
overflow: hidden;
margin:60px 8px;
left: -120px;
}
jQuery
$(document).ready(function () {
bannerAnimation();
});
function bannerAnimation() {
//Jquery Animation
$("#Image_Car").animate({
left: "30"
}, 500, function () {
$("#Image_Car").animate({
left: "10"
}, 200);
});
}

Jquery is not going to help you create motion blur unless you use a canvas, which nearly no one use for creating ads,
or,
you can create multiple instance of the images and place in same place, then animate each with slight time interval and opacity.

This is very good plugin for you:
DEMO
plugin

Change Element Content But Not The Size

I have a page that displays images at a set width. The height is variable so the image keeps it's aspect ratio. On mouse over, the image changes, but so does the height. How can I keep the height and width the same and just have the new image use a max-height / max-width of the last image so the container is not resized.
See Here - http://jsfiddle.net/z3sxc/11/
<style>
li {
width: 190px;
border: 1px solid black;
list-style: none;
}
li img{
width: 100%;
}
</style>
<body>
<ul>
<li onmouseover="clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_1.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
<img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_1">
</li>
<li onmouseover="clip_2.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_2.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
<img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_2">
</li>
</ul>​
</body>

You can try this - DEMO
$("li")
.on("mouseover", function() {
var h = $(this).height();
$(this).find("img").prop("src", "http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg");
$(this).height( h );
})
.on("mouseout", function() {
$(this).find("img").prop("src", "http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg");
});

No JavaScript/jQuery is needed to achieve this effect.
Simply define the background image of a block element (e.g. <div />, <span style="display: inline-block" />, etc.) in a css class, then change the background image on :hover.
See here: http://jsfiddle.net/adamb/z3sxc/15/
HTML:
<div class="picture" />
CSS:
.picture {
background: url(http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg) no-repeat;
background-size: 190px;
width: 190px;
height: 190px;
border: 1px solid black;
}
.picture:hover {
background: url(http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg) no-repeat;
background-size: 190px;
}

You could add a Javascript function to change the CSS on the element:
function changeImage() {
clip_1.style.maxWidth = clip_1.width + 'px';
clip_1.style.maxHeight = clip_1.height + 'px';
clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg';
}​
<li onmouseover="changeImage()" ... />
(Live here)

Here's something that might get you started.
The first adjustment I made was to wrap your image in a <div> with a generic CSS class name:
<li onmouseover="clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_1.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
<div class="clip">
<img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_1">
<div>
</li>​
And then you can give that class some style which will help with the sizing:
.clip {
overflow: hidden;
}
And then with a little jQuery on top:
$(function() {
$('.clip img').load(function() {
$(this).parent('.clip').css({
width: $(this).width(),
height: $(this).height()
});
$(this).unbind('load'); // only do this once
});
});​
​DEMO

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