Change large image in gallery onmouse over of thumbnails - javascript

I currently have a gallery that changes the larger image when the smaller is clicked. Here is the most important code:
.n1:focus span
{
background: url('images/Boot.png')
}
Then
<a class="thumb n1" href=# tabindex=1>
<img src=images/Boot.png><span>
<img src=""><br>Boot</span></a>
I can't figure out how to make this happen onhover or onmouseover.
Here is an example of what I need: http://thelittleappfactory.com/ripit/
Does anyone have any insight? I tried using javascript to open the link onmousehover, but my browser saw it as a popup.

First of all you need to have a thumbnail and a big version of your images. In your code you seem to have a single image. The big images should be hidden with css display:none and absolutely positioned so they will all be on top of each other. I would use jquery's mouseenter and mouseleave events. mouseover event is triggered when the cursor moves over an element and will generate too many calls.
<div class="item n1">
<img class="thumb" src="images/boot_thumb.png" alt="boot/>
<img class="big" src="images/boot_big.png" alt="boot/>
</div>
This javascript code would do the trick:
$('item').mouseenter(function(){
$(this).children('big').fadeIn();
});
$('item').mouseleave(function(){
$(this).children('big').fadeOut();
});

I actually found a way to do this with pure CSS. I thought it was pretty phenominal, because I was told that was impossible and there seems to be need for it. Here's source code for this technique:
http://ostmosis.com/OnHoverChangeImage.zip

Related

mouseenter function only works vertically

I'm trying to replace one image (closed bag) to another (open bag) using mouseenter and mouseleave functions. For some reason it only works when I leave the mouse vertically, but not horizontally. I suspect it has to do with the length of the image but I inspected it and it was not the issue. Here is my code:
$("#tumi_front").mouseenter(function() {
$("#tumi_front").hide();
$("#tumi_open").show();
});
$("#tumi_open").mouseleave(function() {
// alert('leave');
$("#tumi_front").show();
$("#tumi_open").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="tumi_front" src="tumi_front.png" alt="yolo front" height="40%" width="40%" />
<img id="tumi_open" src="tumi_open.png" alt="yolo open" height="30%" width="30%" " style="display: none " />
Thank you in advance for the help!
The problem is you're setting your two different images to have a different height and width. Your front image is at 40% and your second is at 30%. So when you try to hover outside of your smaller image, it triggers the hover onto the larger image, and then hides your image over again, causing the glitch.
Your code (40% 30% broken)
A better solution for this would be to give both your images the same class and toggle the images. This will fix the hover issue you are having with the different sized images, and it is more efficient.
jQuery
$(".double-img").on("mouseenter mouseleave", function() {
$(".double-img").toggle();
});
JSFiddle
My code (40% 30% fixed)
Why not use 1 image (image sprite) and do a background-position with css on :hover. No jquery required!

Using JavaScript and CSS to create hovers and onclicks

I have 4 thumbnail images on the bottom of my page with a main, large image above it. I want to be able to click the thumbnail and have it load into the big image. Additionally, I want to be able to hover over the thumbnail and have a black border appear around it.
I have 40 pages that have the exact same setup (4 thumbs, 1 main image) but all different images (products). The thumbs are all in class="bottom-pic".
It seems easy enough, but perhaps I'm wrong. I'm thinking CSS for the hover, JS for the clicking? I'm VERY new to JS.
Here is the source code:
<a href=""img src="images-large/cobra-dark-wood.jpg" alt="" id="main-photo" >
<img src="images-large/cobra-dark-wood.jpg" alt="" name="photo-bottom-one" class="bottom-pic" id="photo-bottom-one">
<img src="images-large/cobra-dark-wood-one.jpg" alt="" id="photo-bottom-two" class="bottom-pic">
<img src="images-large/cobra-black.jpg" alt="" id="photo-bottom-three" class="bottom-pic">
<img src="images-large/cobra-black-one.jpg" alt="" name="photo-bottom-four" class="bottom-pic" id="photo-bottom-four">
Based on your code, and not requiring anchor tags etc, here is the JavaScript you could use.
NB: This examples assumes you are using jQuery
$(document).ready(function() {
$('.bottom-pic').on('click', function(){
$('.bottom-pic').removeClass("active"); //Removes class from all items
$(this).addClass("active"); //Adds class only to the currently clicked on item
$('#main-photo').attr('src', $(this).attr('src')); //Changes the source of the image tag
});
});
To see a working demo, I created this fiddle for you.
http://jsfiddle.net/2ZgjR/
Please note that the images don't match up because they are being dynamically loaded from a server, but the effect is exactly what you're asking for, just use this code with your images!
I also added an "active" style if you want the border to stay on the item you've clicked on. Simply add some CSS to the style .active { }
Hope this helps
Yes, I would use CSS for the border on hover. You may have to use box-sizing: border-box to make sure things don't jump around a bunch.
First, your main image should be something like this:
<a href="whatever_link">
<img src="images-large/cobra-dark-wood.jpg" alt="" id="main-photo">
</a>
Since you're using jQuery, it would be easy enough to get the switch out the source of the main image on click. Something like this:
$('.bottom-pic').on('click', function(){
var imgSrc = $(this).attr('src');
$('#main-photo').attr('src', imgSrc);
});
That's just off the top of my head. I haven't tested it.

How to make the hovered image on top of other elements

I am trying to hover images and enlarge the image and image info. I want the hovered images div on top of other image div instead of covered by other images div
I used z-index but it doesn't seem to work. Anyone got a good idears? Thanks a lot.
<div class='imgDiv'>
<img src='a.jpg' />
<p>hahaha</p>
</div>
<div class='imgDiv'>
<img src='b.jpg' />
<p>hahaha</p>
</div>
<div class='imgDiv'>
<img src='c.jpg' />
<p>hahaha</p>
</div>
<div class='imgDiv'>
<img src='d.jpg' />
<p>hahaha</p>
</div>
......
.....I have so many images divs....
CSS
.imgDiv{
float:left;
}
.imgDiv:hover{
//part of the enlarge div will be covered by other image divs...
-webkit-transform:scale(1.45, 1.45);
-moz-transform:scale(1.45, 1.45);
-o-transform:scale(1.45, 1.45);
-ms-transform:scale(1.45, 1.45);
transform:scale(1.45, 1.45)
}
Jquery
$('.imgDiv').hover(function(){
//not working...
$(this).css('z-index','999');
})
For the z-index to work, position must be absolute. You will probably have to toggle absolute positionning on hover, and set the top and left attributes so the div stay in place.
It will be easier if you're not having your divs floating.
Remember that absolute position is relative to the first positionned element. Not necessarily the body element. It is relative to the first parent that has its position set to something.
edit
As #ahren pointed out in his comment, I was wrong with z-index only workin with position: absolute;.
That said, I setted up a fiddle with your code except the javascript part, and it seems to work as expected. The behavior is the same with chrome / firefox / ie9. Maybe other parts of your html/css is causing the issue? Or I misunderstood the question?

Content box on image hover?

I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.
This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )
You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/
Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.
I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.

IE8 jQuery text changes on z-index divs

I'm using the jQuery Cycle plugin to cycle through some images on a webpage.
Each image also has various meta-data (title, description) that is also displayed on the page. Whenever the image changes, the title and description text also change to the title and desc for that image.
<div id='slides'>
<a href="http://whatever.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide1.jpg"/>
</a>
<a href="http://somewhere.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide2.jpg"/>
</a>
<a href="http://nowhere.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide3.jpg"/>
</a>
</div>
<div id='slideshow_text'>
<div id='ss_title'>The title goes here</div>
<div id='ss_desc'>The description goes here</div>
</div>
The javascript is pretty simple:
jQuery(document).ready(function(){
jQuery('#slides').cycle({
fx: 'fade',
speed: 1000,
timeout: 10000,
after: alterSlideText,
});
});
The alterSlideText javascript function is very simple. Basically its just running this:
jQuery('div#ss_title').html(slides_array[slideNum]['title']);
jQuery('div#ss_desc').html(slides_array[slideNum]['desc']);
The slides_array is simply an array of the title and description for each slide. So depending on what slide is currently being shown, it picks the appropriate title and description to put in the divs.
So overall the setup is very simple and straightforward. Image changes. Then the text changes.
Now the problem - This all works perfectly in Moz and Webkit. But in IE, the text div's will not change UNTIL I move my mouse over the slides div or slideshow_text div. The text will just not change at all if I just let it sit there. Once I move my mouse into that div, boom it changes to the appropriate text.
One maybe important note, the slideshow_text div has a very high z-index value (1000) and it actually floating over part of the image. I have just confirmed that text in other div's with normal z-index values changes just fine. It's only these divs with the high z-index value that aren't changing until I mouse over it.
Does anyone have any clue as to why this is and how to fix it?
I fixed this by adding the following to the end of the alterSlideText function:
// Force IE to refresh itself
jQuery('div#slides').blur();
jQuery('div#slides').focus();
Great job IE developers. Go find a different job.

Categories