Develop Reference

Image change on hover from a stitched image

I have a image that is created to have 4 images in one See this image
Now, what I am trying to do is get the css to load just the first square at the top. Then when a user hovers over that image it will switch between all four images.
So it will display black on load, then when a user hovers over it, the image changes to red, then blue, then green, then back to black. It then repeats over and over until the mouse is moved off the image area.
I know that I can do this by converting the png to a gif but the image is generated outside of my control so this method is needed.
If anyone can help I will be forever grateful.
Cheers.

You should use CSS sprites and to make the change happend when over use setInterval function to change position ( here the height of each block of your image mesures 300px , so we incerement by +300 ) every defined interval time ,
Below snippet I've used .hover() jquery function to set and clear annimation .
var interval;
$(function(){
$("#image").hover(
function() {
var bottom = 0;
$this = $(this);
interval = setInterval(function() {
bottom >= 900 ? bottom = 0 : bottom+=300;
$this.css({'background-position' : '0px -'+bottom+'px'});
} , 1000)
},
function(){
$this.css({'background-position' : '0 0'})
clearInterval(interval);
}
);
});
#image {
width:150px;
height:150px;
background: url('https://i.stack.imgur.com/h8h14.png') 0 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image" ><div>

jquery responsive image crossfade transition

Does anyone knows how to transform this jQuery effect, instead of having fixed sized images, I need to set the size in percentage (width:100%; height:auto) so they can be responsive. Any ideas?
<script type="text/javascript">
$(function (){
$('img.fade').each(function (){
var $$ = $(this);
var target = $$.css('background-image').replace(/^url|[\(\)'"]/g, '');
$$.wrap('<span style="position: relative;"></span>')
.parent() // span elements
.prepend('<img>')
.find('img:first')
.attr('src', target);
$$.css({
'position' : 'absolute',
'left' : 0,
'top' : this.offsetTop
});
$$.hover(function () {
$$.stop().animate({
opacity: 0.2
}, 250);
}, function () {
$$.stop().animate({
opacity: 1
}, 350);
});
});
});
</script>

I think you mean that the background image isn't scaling.
You could use the css command "background-size" to solve this problem..
Values that could help you are "cover" or "contain":
http://www.w3schools.com/cssref/css3_pr_background-size.asp
var target = $$.css('background-image').replace(/^url|[\(\)'"]/g, '').css({ 'background-size': 'cover' });
If this is not working, you could read out the actual absolute width of your image an set it as background-size. But then you need an resize-event for when you're scaling the browser window..
I would recommend to use two pictures and show/hide the pictures instead of using a background-image for the hover.

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

Why the box disappear immediately?

I want the mouseover on the coverImg then show the coverInfo
the coverInfo show the title and the description of the image
then the coverInfo do show
but I want the coverInfo stay and clickable when mouserover on itself
but it disappear immediately.
So what's the point I have missed?
The HTML
<div class="workshop_img">
<div class="coverInfo"></div>
<a href="#">
<span class="coverImg" style="background-image:url('images/work/show1.jpg')" title="Chictopia "></span>
</a>
The CSS：
.coverInfo {
position:absolute;
width: 200px;
height:200px;
background:rgba(0,0,0,0.5);
top:30%;
left:30%;
display:none;
}
see the jQuery code
$(function() {
$(".coverImg").each(function() {
//make the background image move a little pixels
$(this).css({
'backgroundPosition' : "-40px 0"
}).mouseover(function() {
$(this).stop().animate({
'backgroundPosition' : " -20px -60px "
}, {
duration : 90
});
//shwo the info box
var content = $(this).attr("title");
$("<div class='coverInfo'></div>").text(content).prependTo($(this).parent()).fadeIn("fast");
}).mouseout(function() {
$(this).stop().animate({
'backgroundPosition' : "-40px 0"
}, {
duration : 200,
});
$(this).parent().find(".coverInfo").stop().fadeOut("fast");
})
})
});
</div>
EDIT：
I have searched a lot and find something similar, I took them and the answer given below together to solve my problem, here is the code:
$(function() {
$(".coverImg").css({
'backgroundPosition' : "-40px 0"
}).mouseenter(function() {
var box = $(this).parents(".workshop_img").find(".coverInfo");
var content = $(this).attr("title");
var info = box.text(content);
$(this).stop().animate({
'backgroundPosition' : " -20px -60px "
},90);
info.show();
}).mouseleave(function() {
var box = $(this).parents(".workshop_img").find(".coverInfo");
var content = $(this).attr("title");
var info = box.text(content);
$(this).stop().animate({
'backgroundPosition' : "-40px 0"
},200);
info.stop().hide();
});
});
It has just been clean, but do not work fine.
What's the problem?

The new box shows immediately because it is not initially marked as hidden. .fadeIn() only fades in something that is initially not showing.
You can make it initially not visible like this:
$("<div class='coverInfo'></div>").text(content).hide().prependTo($(this).parent()).fadeIn("fast");
You also can get rid of the .each() iterator you're using. You don't need it. You can just use:
$(".coverImg").css(...).mouseover(...).mouseout(...);
You don't need the .each() at all.
I'd also suggest you use .hover(fn1, fn2) instead of .mouseover(fn1) and .mouseout(fn2).
And, it looks like you are creating a new object and inserting it on every mouseover event such that multiple such objects will pile up in the page. You should either .remove() the object in the mouseout function or you should reuse a previously existing element if it exists in the element rather than creating more and more of them.
Sometimes when you are using the events for mouse hovering and you are also changing the page, the change to the page can cause the element to lose the mouse hover which then hides the change to the page and then it all starts over again. I can't tell for sure if that is happening in your case (I'd need a working example to play with to see), but it seems possible.

Jquery - get the real dimension of the image or a way to be compliant if no js

Hello
The context is a gallery and a page of thumbnails
The goal of the script is to minimize the thumbnails and on hover to display them with their original size.
The script do it well :
-get the minimum size of thumbnails
-define this minimal size for all thumbnails
-on hover increase z-index and define the size as the original size of this thumbnail
but if the javascript is disabled it's a mess because each thumbnails has is own size
If I define the same size for all thumbnails by CSS or in html -in order to be compliant if there is no js-, the script will take this as the original size of the thumbnails, whereas it's not the real size of the picture.
the code is :
<script type="text/javascript">
jQuery(window).load(function(){
var min_dim_width = 10000;
var min_dim_height = 10000;
$("ul.thumbnails img").each(function() {
$.data(this, 'size', { width: $(this).width(), height: $(this).height() });
if ($.data(this,'size').height < min_dim_height)
min_dim_height = $.data(this,'size').height;
if ($.data(this,'size').width < min_dim_width)
min_dim_width = $.data(this,'size').width;
});
$(".thumbnails img").each(function () {
$(this)
.css('width', min_dim_width+'px')
.css('height', min_dim_height+'px')
$(this).parents('li')
.css('width', min_dim_width+5+'px')
.css('height', min_dim_height+5+'px');
}).hover(function() {
if ($.data(this,'size').height == min_dim_height)
{
new_dim_height = min_dim_height*1.2;
}
else
{
new_dim_height = $.data(this,'size').height;
}
if ($.data(this,'size').width == min_dim_width)
{
new_dim_width = min_dim_width*1.2;
}
else
{
new_dim_width = $.data(this,'size').width;
}
$(this).parents('li').css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/
$(this).addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
.animate({
marginTop: '-'+new_dim_height/2+'px',
marginLeft: '-'+new_dim_width/2+'px',
top: '50%',
left: '50%',
width: new_dim_width, /* Set new width */
height: new_dim_height, /* Set new height */
padding: '10px'
}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
}, function() {
$(this).parents('li').css({'z-index' : '0'}); /* Set z-index back to 0 */
$(this).removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
.animate({
marginTop: '0', /* Set alignment back to default */
marginLeft: '0',
top: '0',
left: '0',
width: min_dim_width, /* Set width back to default */
height: min_dim_height, /* Set height back to default */
padding: '5px'
}, 400);
});
});
</script>
thx for reading this and all my consideration if you succeed !
we can see it in action right there : http://www.planete-flop.fr/gallerie/index.php?/category/12
PS : reformulation of my "problem"

Well... I don't know if it's what you are looking for but... generally it's a good idea to set the image's dimensions in the html markup itself... as in:
<img src="cheese.jpg" alt="an image" title="whee!" height="100" width="200" />
You can override w/ JS if it is supported. Otherwise, at the least you get some predictability for your layout (even if the thumbs appear skewed).
Hope it helps!

Just find the correct size on the server
http://php.net/manual/en/function.getimagesize.php