I'm having a problems with these event. I'm not sure what is the best to use. I'm trying to do some opacity animation depending on where the mouse is.
I have these structure
<div class="thumbnail-wrapper">
<a href="#">
<img class="thumb" src="image/image1.png" />
</a>
<a href="#">
<img class="thumb" src="image/image2.png" />
</a>
<a href="">
<img class="thumb" src="image/image3.png" />
</a>
<a href="#">
<img class="thumb" src="image/image4.png" />
</a>
<a href="#">
<img class="thumb" src="image/image5.png" />
</a>
</div>
Basically, what i want to do is whenever the mouse enters the image, the rest of the images (other than the where the mouse is) will do animate opacity change ie: $(img).stop().not(this).animate({"opacity":"0.4"})
and where the one mouse is will animate to opacity:1.
Please help what is the best approach to this. I tried hover but i was unsuccessful.
TIA
I'd suggest to use .delegate()help for binding an event handler to the wrapping div.thumbnail-wrapper. Catching all mouseenter events from the <img> nodes there. Use .fadeTo()help and .siblings()help to accomplish the task.
Example:
$('div.thumbnail-wrapper').delegate('a', 'mouseenter', function(e) {
$(this).stop(1,0).fadeTo('fast', 1).siblings().stop(1,0).fadeTo('fast', 0.2);
});
Demo: http://www.jsfiddle.net/qR2NU/2/
(I'm using div nodes in the example, you would need to replace div with img in the .delegate() arguments)
$('.thumbnail-wrapper img') //all images under the wrapper
.bind('mouseenter',function (){//when mouseenter,blur me,focus my siblings
$(this).animate({"opacity":"0.4"}).siblings().animate({"opacity":"1"});
}).bind('mouseleave',function (){// when mouse out, default state or (make me sober as i call it )
$(this).animate({"opacity":"1"})
});
$('.thumbnail-wrapper img').hover(function(){
$(this).siblings().animate({'opacity': 0.4});
}, function(){
$(this).siblings().animate({'opacity': 1});
});
Related
I have made a plugin which uses click events, however sometimes my clickable element may be within an A link, however it might not be a direct child, is there a good way to stop the a link from firing whilst not knowing it's position?
For example:
<div id="lightbox">
<a href="">
<div class="twocol">
<img src="http://www.ducati.com/cms-web/fs//MediaGalleries/345/MediaGallery_345008/SBK-1199Panigale-S_2012_Studio_Tricolore_B01_1920x1280.jpg/SBK-1199Panigale-S_2012_Studio_Tricolore_B01_1920x1280.mediagallery_output_image_[1920x1080].jpg" alt="Ducati Panigale 1199 - Image 1" class="responsive-img">
</div>
</a>
<a href="">
<div class="twocol">
<img src="https://www.asphaltandrubber.com/wp-content/gallery/ducati-1199-panigale-r-launch-with-jensen-beeler/ducati-1199-panigale-r-launch-cota-jensen-beeler-07.jpg" alt="Ducati Panigale 1199 - Image 2" class="responsive-img">
</div>
</a>
</div>
I'm not really sure if your clickable element is always in a element with a class name.
But one way to do it is to check if the parent is a <a> tag and add event.preventDefault.
I am trying to figure out how to show and hide some images depending on the clicked element with one of the events of Slick.
<div class="items" id="icons-tabs">
<a href="javascript:void(0)" class="item iconClicked" data-tab="tab0">
<img src="/researchicon.png" alt="" class="img-active">
<img src="/researchKOSelected.svg" alt="" class="img-inactive">
</a>
<a href="javascript:void(0)" class="item iconClicked" data-tab="tab1">
<img src="/WideRange.png" alt="" class="img-active">
<img src="/WideRangeUpSelected.svg" alt="" class="img-inactive">
</a>
<a href="javascript:void(0)" class="item iconClicked" data-tab="tab2">
<img src="/SSI_toolbox.png" alt="" class="img-active">
<img src="/toolboxKOSelected.svg" alt="" class="img-inactive">
</a>
<a href="javascript:void(0)" class="item iconClicked" data-tab="tab3">
<img src="/PricingIcon.png" alt="" class="img-active">
<img src="/PricingIconUpSelected.svg" alt="" class="img-inactive">
</a>
</div>
As you see in that markup, there are some images with the class img-active which are the images that the user will see when the document is ready.
That set of images looks like this:
All I need is that when you click over the image, it must hide the current one and show the image with the class img-inactive, so it must be like a kind swap of classes between img-inactive and img-active.
This what I have done so far:
$mobSlick.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('a[data-tab="tab'+nextSlide+'"] > img')
.first()
.addClass('img-inactive')
.removeClass('img-active');
$('a[data-tab="tab'+currentSlide+'"] > img')
.first()
.addClass('img-active')
.removeClass('img-inactive');
$('a[data-tab="tab'+nextSlide+'"] > img')
.not(":eq(0)")
.addClass('img-active')
.removeClass('img-inactive');
$('a[data-tab="tab'+currentSlide+'"] > img')
.not(":eq(0)")
.addClass('img-inactive')
.removeClass('img-active');
});
The problem with this code is that it works almost fine when you click the items from left to right, but when you do it from right to left or with no order at all, it crashes.
Any suggestions?
You are making this way too hard.
First of all, inline javascript (href="javascript:void(0)") is not a good tactic and you should use Content Security Policy to make sure it's not run any inline stuff.
Second I believe what you want is way too simple for the script you have written. You just need to insert style="display:none;" on img-inactive images and the following jquery code.
`$('.iconClicked').click(function() {
$(this).children().toggle();
});`
Then again you could insert some animation to it, like fade. To do that you should position the images absolutely, so each pair is on the same spot. You add transition on the opacity attribute of the images and with jquery you toy with opacity as needed.
If you simultaneously set one to opacity 1 and the other to 0, then the images will be semitransparent for a while. To prevent this, you should set one image to opacity 1 and set a timer (with setTimout) to then change the other to 0.
Edit:
You can also use toggleClass('img-active img-inactive'); instead of plain toggle(). This will interchange the classes. I vaguely understand your exact problem, so if this does not answer your question, maybe you should give some more info.
I'm looking for a javascript option that will allow me to mouseover a thumbnail image to replace the "large" image. The trick here is using the anchor href from the thumbnail link as the large image source. I need this to work for multiple instances.
The <img src="large1.jpg"> etc. can be removed if that helps
Below is a simplified version of the HTML code I am using. This code cannot be changed.
Every id and class can be unique.
<div class="image-1">
<img src="large1.jpg">
</div>
<div id="thumbs">
<a id="thumb_1" href="large1.jpg" title="1"><img src="small1.jpg" alt="image 1"/></a>
<a id="thumb_2" href="large2.jpg" title="2"><img src="small2.jpg" alt="image 1"/></a>
<a id="thumb_3" href="large3.jpg" title="3"><img src="small3.jpg" alt="image 1"/></a>
</div>
...
<div class="image-2">
<img src="large2.jpg">
</div>
<div id="thumbs">
<a id="thumb_1" href="another_large1.jpg" title="1"><img src="anout_small1.jpg" alt="image 1"/></a>
<a id="thumb_2" href="another_large2.jpg" title="2"><img src="another_small2.jpg" alt="image 1"/></a>
<a id="thumb_3" href="another_large3.jpg" title="3"><img src="another_small3.jpg" alt="image 1"/></a>
</div>
...
check this solution
http://jsfiddle.net/dtdaynjp/
add to all "large" image unique class, image-1, image-2, image-3..
for each thumbs link add class similar like appropriate large image: thumb-image-1, thumb-image-2, thumb-image-1...
add this jQuery code:
$(function() {
$(".mouseover a").mouseover(function(){
var src=$(this).attr('href');
var classs=$(this).attr('class');
classs=classs.substr(6);
$('.'+classs).find('img').attr('src',src);
})
})
I would just use the CSS :hover selector. Then you can add animations and other cool things to your images.
EXAMPLE HERE.
I'm having trouble using Fancybox on my website.
These are two (out of 9) of my divs, with different images in it. The thing is, whenever I click on any of the images, it shows the same image everytime. So when I click on the 2nd image, it shows the first image, just like all of the other divs.
<a id="single_3" href="Foto's/symposium1_groot.png" title="Test">
<div id="symposium1"> <img src="Foto's/symposium1.jpg" alt="" /></div></a>
</a>
<a id="single_3" href="Foto's/symposium2_groot.png" title="Test">
<div id="symposium2"> <img src="Foto's/symposium2.jpg" alt="" /></div></a>
You need to make ids unique. Also having 2 closing </a> tags for the first block probably isn't good for you.
Try:
<a id="single_3" href="Foto's/symposium1_groot.png" title="Test">
<div id="symposium1"> <img src="Foto's/symposium1.jpg" alt="" /></div>
</a>
<a id="single_4" href="Foto's/symposium2_groot.png" title="Test">
<div id="symposium2"> <img src="Foto's/symposium2.jpg" alt="" /></div>
</a>
I have this for changing the background image of div.fullscreen:
<div id="swatches">
<a href="http://www-03.ibm.com/ibm/history/exhibits/storage/images/PH3380A.jpg">
<img src="http://www.wmagency.co.uk/wp-content/uploads/2011/04/test.jpg"
onmouseover="document.images['bigPic'].src='http://josefsipek.net/docs/s390- linux/hercules-s390/ssh-dasd1.png';"
width="72" height="54" alt="Item ksc1" />
</a>
</div>
However, is there a way to change the background image of a table on hover of another image link?
Sure, look at an example here.
This is done by giving the img an id and the table an id. Then we listen for when the mouse is over the img and when it does, change the background-image of the table.
Only want to use inline JavaScript? Use this:
<div id="swatches">
<a href="http://www-03.ibm.com/ibm/history/exhibits/storage/images/PH3380A.jpg">
<img src="http://www.wmagency.co.uk/wp-content/uploads/2011/04/test.jpg"
onmouseover='document.getElementById("table_id_here").style["background-image"]="url(\'http://www.gravatar.com/avatar/\');'
width="72" height="54" alt="Item ksc1" />
</a>
</div>