Show another image when hovering over image - javascript

I really like this pure CSS gallery (explanation).
How do I change this code so that it doesn't preload all the pictures that show on mouseover/hover? Any lightweight javascript or similar that I can use instead? (or simple wordpress plugin).
It is important that the image that shows on hover is right above the thumbnail just like the example above and that it shows a separate image (no resize).
I have searched for days and I can't find any lightbox that does the same so hope someone can help me, thanks.

I would just use jquery, it would look something like,
<script>
$("thingtohover").hover(
function () {
$(this).append($("<span class='hovers'<img src=<'/path/to/img.jpg'")</span>);
},
,
function () {
$(this).find("span:last").remove();
}
</script>

Related

Bootstrap carousel - loading animation when active image is loading

I have a Bootstrap carousel and an invisible div with a loading gif that I want to show while a big image is loading. I'd like to show this div only when I change the active image on the carousel and this image is still loading.
I've already got the HTML and CSS working, I just need an help with jQuery.
I fetch the images links from Imgur and then build the carousel-items that I need with jQuery and append them on the carousel container.
I then attached to the carousel event slide.bs.carousel a function that shows me the loader. and this works
BUT BUT BUT
I'm worried that the loader will show for few milliseconds even if the image is already loaded/cached. How can I prevent this? How can I know if the image that is becoming active is already loaded? Do I really need to worry about this or I just leave it like this?).
I then want to hide the loader when the active image is ready, and I've done this:
$('.carousel-item img').each(function(){
$(this).on('load', function(){
$("#loader_container").css("visibility","hidden");
});
});
But it doesn't work. Seems like this load even keeps firing until
all the images of the whole carousel are loaded, and also somehow
the loader doesn't hide in the end, and this is the issue n.2.
Probably I'm approaching this wrong.
Is issue n.1 really a problem? And how can I solve issue n.2?
Thank you!
EDIT 1:
I tried to do this but still doesn't work. When I slide to the next slide I see that the image is already loaded, then the loader appears and doesn't go away anymore.
$(".carousel-item img").each(function(index){
$(this).on('slid.bs.carousel', function(){
$("#loader_container").css("visibility","visible");
});
$(this).on('load', function(){
$("#loader_container").css("visibility","hidden");
});
$(this).attr("src",links[index]);
});
EDIT 2:
Also, it seems like the browser try to load all the images as soon as possible, even the ones that are not displayed/are not active items.
I'd like to load the images only if the user goes to that slide and makes the item active.
EDIT 3:
I've found a library name jquery.unveil.js that seems like it does exactly what I need and is super easy to use... but somehow it doesn't work.
Maybe AngularJS can help me? Anyone know how can I modify my code to do this with angular? Like using ngui-in-view?
$('.carousel-item img').each(function(){
$(this).on('slid.bs.carousel', function(){
$("#loader_container").css("display","none");
});
});
You can use the slide.bs.carousel and slid.bs.carousel instead
Solved with lazy loader, here the code:
$(".carousel.lazy").on("slide.bs.carousel", function(ev) {
var lazy;
lazy = $(ev.relatedTarget).find("img[data-src]");
if(lazy.length > 0){
$("#loader_container").css("visibility","visible");
$(".carousel-item img").on("load",function(){
$("#loader_container").css("visibility","hidden");
});
lazy.attr("src", lazy.data('src'));
lazy.removeAttr("data-src");
}});
I needed that if(lazy.length > 0) because once I did a full round of the carousel and all the images where loaded, somehow the loader would show up and never go away. I tried with if(img.complete) but it didn't work so I used that technique.

MEJS (Media Element JS) on play function?

I'm trying to write a function that hides some text that overlays a video placed on the page through MEJS (the core wordpress integration).
I'm displaying it through the wp_video_shortcode() function, so I'm not actually having to write any JS to get the player to display etc.
I've tried writing a bit of poor code that just checks for a click on the containing div and hides the text, then another click shows it. But I feel like I should be doing something a bit more elegant than that.
Any ideas?
Here's the code I have so far:
$('.wp-video').on('click', function() {
if( $('.video-title').is(':visible') ) {
$('.video-title').fadeOut('2000');
} else {
$('.video-title').fadeIn('2000');
}
});
you can use jquery toggle function to avoid extra "if" statement
$('.wp-video').on('click', function() {
$('.video-title').toggle(2000);
});

jquery tools overlay - Two on same page

I have been working with jquery tools overlays. I got the below code online and have been able to make it work. However I now need the overlay setup with another link on the same page and need a different size on that overlay.
I tried copying and pasting the code and changing the rel to look for an id. My plan was the get a second function set to different div's, then setup the size in css. I'm rather new to jquery and although I thought it would be easy I cannot figure this out.
If anyone has any better solutions please let me know.
$(function () {
$("a[rel]").overlay({
mask: 'lightgrey',
effect: 'apple',
onBeforeLoad: function () {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href"));
}
});
});
I have tried changing $("a[rel]") to $("a.testclass") and $("#test"), but no other identifier seems to work.
Make sure that you include jQuery Tools in your HTML, like so:
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
That should make it work.
This is an official jQuery homepage. The API documentation is well organized. Search something about jQuery in this site.
overlay() doens't seem to be jQuery's default function. The function may be added like
$=jQuery;
$.fn.overlay=function(a, b, c){do something};
JavaScript eval("text") function also do the job you want (maybe).

JQuery map highlight?

I am need paint my image. I'm trying use JQuery in here this link: http://davidlynch.org/projects/maphilight/docs/
When I am using mouseover does work, but I need when open page all images are painted without mouseover ?
how to do this ?
thanks.
$(document).ready(function()
{
$('.targetClass').mouseover();
}
Here you have demo doing almost exactly what you are asking for:
http://davidlynch.org/projects/maphilight/docs/demo_simple.html

jQuery Galleria plug-in: Make auto-play?

I am using this jQuery plugin
It is very nice, but I can't seem to figure out how to get it to auto-play. (automatically transition to the next image at an interval)
Has anyone else gotten this to do that?
$('#galleria').galleria({
extend: function() {
this.play(4000); // will advance every 4th second
}
});
Actually the new version of galleria has an option for autoplay. looks like this:
(where .test is the name of the div layer containing your images)
<script>
// Load theme
Galleria.loadTheme('../src/themes/classic/galleria.classic.js');
$('.test').galleria({
autoplay: 1000
});
</script>
In my experience, it doesn't have that option. You'd have to hack it to add that.
You might want to consider using another slider plugin: Easy Slider, Galleriffic, Pikachoose

Categories