Jquery Image Zoom for All Images - javascript

I found a jquery image zoom plugin on the web (http://www.elevateweb.co.uk/image-zoom) but I have more than 200 small images that I would like to apply this plugin.
I think I need to track mouse on elevatezoom.js, how can I do that?
HTML
<img id="zoom_01" src="image1.png" data-zoom-image="image1.jpg"/>
Script
<script> $("#zoom_01").elevateZoom(); </script>
(elevatezoom.js file can be found on http://www.elevateweb.co.uk/download-file)

Try something like this:
First, give a .class to handle all images
<img class="image-to-zoom"
id="zoom_01" src="image1.png" data-zoom-image="image1.jpg"/>
Then, attach to the .class the mouseover event to trigger elevateZoom() on the element has the mouse hover
$('.image-to-zoom').on('mouseover',function(){
//This element is being 'mouseovered', so trigger the plugin
$(this).elevateZoom();
});

Related

How to wait until appended html has loaded assets

I have a gallery plugin that generates HTML. I need to somehow wait until the appended html has finished loading it's assets to append it again. I tried window.load but that didn't work. The only thing working that will modify the the targeted area is a setTimeout callback which I feel is very hacky.
How can I accomplish what I am trying to do?
The current code I am trying to run on the generated markup is:
jQuery('ol').append('<li data-toggle="modal" id="thumb" class="yt-thumb" overflow-scroll="false" overflow-scroll="true" data-target="#youtubeModal"><img src="/images/dome-thumb.jpg" /></li> '); // add youtube to thumb slider
jQuery('ol').appendTo( jQuery('#thumb-area') )
Heres what I would do, I recognize its not perfect but you could insert the image into the dom sepratly with an onload event and when that is called back insert the modal knowing that the browser has completely loaded the image.
$('body').append('<img style="display:none" id="temp">');
$tempImg = $('img#temp');
$tempImg.on('load', function() {
// Append your modal here
jQuery('ol').append('<li data-toggle="modal" id="thumb" class="yt-thumb" overflow-scroll="false" overflow-scroll="true" data-target="#youtubeModal"><img src="/images/dome-thumb.jpg" /></li> '); // add youtube to thumb slider
jQuery('ol').appendTo( jQuery('#thumb-area'))
});
$tempImg.attr('src', '/images/dome-thumb.jpg');
So when you update the src on the hidden temp image the browser will download the image, then when that is finished you insert the modal.

Responsive image with hover effect

I currently have an image with a hover effect that looks like this:
<img src="jb-400x500.jpg" alt="yada" width="400" height="500" onmouseover="this.src='jb-400x500-2.jpg';" onmouseout="this.src='jb-400x500.jpg';" />
This works fine, except I would like for only the second image (jb-400x500-2.jpg) to be displayed for mobile viewers. I tried using srcset to achieve this, but doing so gets rid of the mouseover effect for desktop viewers. Is there any way to make the two work together?
Thanks.
If you include a srcset on a browser that supports it, the src attribute will be ignored. So your script will need to change the srcset as well as, or instead of, the src attribute. E.g.
<img src="jb-400x500.jpg" alt="yada" width="400" height="500"
srcset="jb-400x500-2.jpg 720w,jb-400x500.jpg 1x"
onmouseover="this.setAttribute('srcset','jb-400x500-2.jpg 720w,jb-400x500-2.jpg 1x');"
onmouseout="this.setAttribute('srcset','jb-400x500-2.jpg 720w,jb-400x500.jpg 1x');" />
You may need to add some JavaScript via the <script> tag at the bottom of your HTML document.
For starters, you have to add an id attribute to your image so we can select it.
<img src="jb-400x500.jpg" id="image-1" alt="yada" width="400" height="500" />
Secondly, we'll use Javascript to detect if you're using a touch device, and apply the necessary behaviors to your image element:
<script>
// Detect if browser enables touch events
var isTouchDevice = "ontouchstart" in document.documentElement;
// Select your image
var image1 = document.getElementById("image-1");
if(isTouchDevice){ // If it's touch, change the image src
image1.src = "jb-400x500-2.jpg";
}else{ // If it's not touch, assign mouseover and mouseout events
image1.addEventListener("mouseover", function( event ) {
image1.src = "jb-400x500-2.jpg";
});
image1.addEventListener("mouseout", function( event ) {
image1.src = "jb-400x500.jpg";
});
}
</script>
Remember to add your <script> at the bottom of your document, right before you close </body>.
You need to use css and #media-query to achieve this effect
Basically I can tell that you need to add two images with different hover effects – one for desktop and one for mobile
And hide one of them depending on screen resolution with css.

Get Isotope to not load specific images at all

I'm working with Isotope and I have a lot of images in it.
The problem is that when visiting my one page website from a smartphone it takes quite a bit to load the page as isotope load all the images thumbnails as soon as isotope itself loads.
So, basically I want to hide/not load all the images that mustn't be shown if it's category isn't clicked and what I did was use two workarounds:
set the figure to display:none so that it doesn't show the void where it was supposed to be and the other images can actually occupy that space
set the img src to about:blank so that it doesn't load until it's category is clicked
then when the link "Click me!"(category) is clicked the figure gets set to display:block and the img src gets replaced by the real image path.
style:
#showfigure{
display:none; !important
}
body:
Click me!
<figure id="showfigure" class="filter imgtoshow">
<img id="showimg" src="about:blank" alt="">
</figure>
script:
<script>
function showAll() {
document.getElementById("showfigure").style.display = 'block';
$("#showimg").attr("src","example.jpg");
};
</script>
Now, the only way I got it to work with multiple figures/images was giving each figure and image it's own id (showfigure1, showfigure2, showfigure3 etc... and showimg1, showimg2, showimg3, etc...) as using the same id only works for the first figure/img in the code.
Am I missing something?
I tried replacing the path of the img src like this:
http://jsfiddle.net/F6Gds/28/
But I can't get it to do the same with the onclick function from the link "Click me!", and anyways there's the same problem with the ids.
Thanks in advance for any help!

How to get a iframe in an Image Map?

I have been working on the side bar where it says Click On Game Lists Below on http://www.bespoke-arcades.co.uk/store/arcade-machines/16-synergy-elite-arcade-machine.html on the left hand side.
I have an image map because I would rather have one image downloaded than a ton (as it slows down loading times).
But the image map won't allow me to use class="iframe" in the <area> tag. If I do <img src="yyy" /> it will work and open up a fancybox iframe popup, but if I use the imagemap the class="iframe" function isn't really accepted.
Is there any work around to making this work? I have the fancybox js and css on the page in question. I also have the correct javascript to work if I use that class function.
Try changing this :
<script type="text/javascript">
$('a.iframe').fancybox();
</script>
by this :
<script type="text/javascript">
jQuery(document).ready(function($){
$('area.iframe').fancybox({
"type":"iframe",
"width": 600, // or whatever
"height": 380
});
});
</script>
... of course, don't forget to add class="iframe" to each area tag.
Also check this answer or this for further reference.

change img source with attr not working on ios5

I'm trying to change the source of an image and have t fade in when you click in another spot, and it's set up like so
$('.thumbs').bind('click', function() {
$('#MyT').attr('class', 'wierd');
$('#MyT').fadeIn(0);
});
it works well when I test it on Chrome, but when I upload it to iPad, it doesn't change the source. What am I doing wrong here?
Changing the class value of the image won't change its src. If you wanted to change its source, you would do something like this:
$(".thumbs").on("click", function(){
$("#MyT").attr("src", "image2.png").fadeIn("slow");
});
I'm assuming of course there is a <img src="foo.png" id="MyT" /> on your page.

Categories

Resources