I'm having The following issue, this code:
<div class="image-container">
<div id="over-1" class="glass" onmouseout="$(this).stop().fadeOut();"></div>
<img src="img.jpg" onmouseover="$('#over-1').stop().fadeIn();" />
</div>
The mouse over and mouse out works fine, however on occasion the overlay image fades back in by itself after fading out, I have searched for a solution, so far being told to use jquerys hover function etc and similar, however so far no solution.
Can anyone help?
Set an additional fadeOut() call on the container "image-container" and it'll solve the issue
$(document).on("mouseover", ".image-container", function(){
$("#over-1").fadeOut();
});
Fiddle
Related
I have a problem with IE11 and jQuery's function .slideDown()
When I press a button to call the function .slideDown() it looks like the image below.
If I move the mouse the indentation (or what it could be called) disapperas, but if I collapse and expand there it is again.
Does anyone know if this is a known error, or have any suggestion on how I can solve this?
EDIT: Updated with some code.
html
<div class="small-info">
<div class="expande">
<span id="show-more">read more</span><span class="icon-arrow-down"></span>
</div>
</div>
<div class="extended-info" hidden>
....
</div
js
$('#show-more').on('click', function() {
$('.small-info').slideUp();
$('.extended-info').slideDown();
});
I had the same problem as in this question, jQuery slideToggle and CSS border-radius propery show wired in IE10
And it was fixed by adding following to extended-info & small-info:
display:inline-block;
instead of just display:block;
Before posting here i was testing over 30 or so Jquery image plugins to make my images appear full width when clicked on.
the structure of the HTML is as follows:
<div class="whatever">
<img id="noonecares" src="pff"></img>
</div>
and not
<img ></img>
I'm not talking about zooming in the photos but displaying the whole image onclick instead
I'm looking for a Jquery solution preferably.
The solutions that i've been looking into are: zoomfancy easyzoom ajaxzoom ...
Thank y'all
If you just want a simple inline image expander then jQuery's toggleClass() is perfect for that. You shrink the images to a fixed size with CSS and then toggle it with a click.
DEMO
Something like
<div>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRvA_rqizvEgVJhJwLbpgMz7CgGwnjW5BlXHrBNzRwRXsq7O3Gi" />
</div>
script
$("div").on("click", function() {
window.open($("img").attr("src"), "_blank", "menubar=1,resizable=1");
});
?
jsfiddle: http://jsfiddle.net/chrisbenseler/6GW6M/
This is my approach.
<div class="whatever">
<img id="noonecares" src="http://imagizer.imageshack.us/v2/100x75q90/21/0ss1.jpg"></img>
</div>
Script
$('.whatever').on('click','#noonecares', function(){
window.open($(this).attr('src'));
});
JSfiddle: http://jsfiddle.net/hFp6z/
UPDATE: If you want a plugin to zoom full size, then you can check fancybox or lightbox.
I really like this slider sample HERE!. But I want to do is assign next/previous onclick command on images display on right side like this:
Instead of clicking those DOTS. I want to assign the onclick EVENT on images(RED BOXES).
How can I tweak that one.
Thank you in advance!
I've simply changed the $navDots variable to point to the images on line 90 of js.
var navDots = $('.nav-images');
this.$navDots = navDots.children( 'img' );
Then use this HTML:
<div class="nav-images">
<img src="http://lorempixel.com/400/200/city" alt="img01" width="100px"/>
<img src="http://lorempixel.com/400/200/business" alt="img02" width="100px"/>
<img src="http://lorempixel.com/400/200/technics" alt="img03" width="100px"/>
<img src="http://lorempixel.com/400/200/people" alt="img04" width="100px"/>
<img src="http://lorempixel.com/400/200/nature" alt="img05" width="100px"/>
<img src="http://lorempixel.com/400/200/sports" width="100px"/>
</div>
Hope it helps! Please see codepen example as well!. http://codepen.io/anon/pen/corjw
Disclaimer
Please do link to the non-minified source of the plugin, so you can modify that file directly. Currently, the plugin handles all the elements inside the #cbp-fwslider area. It may not be advisable to hack from outside, which is what this solution is...
Solution
It looks like you can mimic this by hiding the dots (which is what the plugin uses by default) and using your two elements to trigger click events on the dots. The currently active dot is indicated by a cbp-fwcurrent, so something like $('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent') would select the current dot. Use jQuery's next() and prev() calls check if the relevant dot exists, and then do a $el.trigger('click').
Code Outline (untested)
$('#fwdButton').click(function() {
var $dot = $('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent'),
$nextDot = $dot.next();
if ($nextDot) {
$nextDot.trigger('click');
}
});
`
I would like to know the best way to add a next and back button to click through my images. The images currently scroll left & right when you roll over a hotspot.
I have tried adding anchors to images, which works but is a bit messy.
Here is my code:
<div class="scrollWrapper" >
<div class="scrollableArea" >
<div class="boxer">
<img src="img/apples" />
</div>
<div class="boxer">
<img src="img/apples" />
</div>
<div class="boxer">
<img src="img/apples" />
</div>
</div>
</div>
Easiest way is to use a plugin to handle your slideshow, I like Malsup's cycle plugin, here's an example of what you're trying to do: http://jquery.malsup.com/cycle/int2.html
Instead of using a plugin, read this: http://blog.wearelaunchbox.com/?p=1029
This is great tutorial on how to make your own slider that you're talking about with very little jQuery. Let me know if this helps.
EDIT: Here is a jsfiddle running the right function how you want it, reworked from the tutorial.. You can take this code and rewrite the same function to make it go the other way.
http://jsfiddle.net/Ug3fu/3/
Hi I would like to slide an element out when the mouse goes over and then slide it back and hide when the mouse goes out..I have this code, but I have problem when the mouse leave the element before the first mouseenter function is completed..The .entry_extend div stay visible. I tried to the hover function, but is the same problem..Please help..Thanks.
jQuery("document").ready(function(){
jQuery(".fire").mouseenter(function(){
jQuery(this).children('.entry_extend').stop(true, false).show('slide',null,500,null);
});
jQuery(".fire").mouseleave(function(){
jQuery(this).children('.entry_extend').stop(true, false).hide('slide',null,500,null);
});
});
<div id="craft" class="fire">
<div class="entry_main">
<a href="" title="">
<img src="" alt="" />
</a>
</div>
<div id="entry_ex_craft" class="entry_extend">
original shisha pipe collection
</div>
</div>
Please Help:)
You are trying to implement a "hover". This works:
jQuery(".fire").hover(
function(){jQuery('.entry_extend', this).stop(true, true).show(500);}
,
function(){jQuery('.entry_extend', this).stop(true, true).hide(500);}
);
Mind you, it isn't a good idea to have the DIV you are sliding in and out within the DIV you are hovering on, since HIDING the DIV alters the boundaries of the DIV containing it. You can end up with some "trembling" activity sometimes because of this.
try combining mouseover+mouseenter and mouseout+mouseleave using binding.. see here:
jQuery("document").ready(function(){
jQuery(".fire").bind('mouseover mousenter',function(){
jQuery(this).children('.entry_extend').stop(true, false).show('slide',null,500,null);
});
jQuery(".fire").bind('mouseout mouseleave',function(){
jQuery(this).children('.entry_extend').stop(true, false).hide('slide',null,500,null);
});
});