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.
Related
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();
});
I don't understand why this function doesn't fire. I want to declare an image in HTML with a single onload function, which will automatically take care of the image's source and mouseover/out functions.
The HTML looks like this:
<img id="menuBtnNovo" onload="imgButton(this)"/>
and the JS function imgButton looks like this:
function imgButton(e){
window.alert("asdasdad");
e.src="images/def/" + e.Id + ".png";
e.onmouseover= function(){ *change image here*}
e.onmouseout= function(){ *change image back here*}
}
Now, not even the alert pops up, and I don't know why. I tried putting script in <head> and setting src to none src="" in the <img>. I'm using Firefox, but it doesn't work in Edge either.
Question is: how do I fire onload function on an image element?
Also, if you have any idea of your own way of implementing this behaviour of automatically loading certain images (that would actually be buttons/links), feel free to share it. I'm new to JS but not to programming.
As you might see, all images are in "images/def/..." and all images for when the mouse is over the img are in "images/mo/...".
I always try and let browser do image replacements, but if you have to use script, than you can do something like this on DOM ready, or window load event:
$('img[data-regular]').each(function(i) {
var thisImage = $(this);
var regular = thisImage.data('regular');
var hover = thisImage.data('hover');
thisImage.attr('src', regular);
/* Preload image for hover */
$('<img/>')[0].src = hover;
/* Set events */
thisImage.on('mouseenter', function(e) {
thisImage.attr('src', hover);
}).on('mouseleave', function(e) {
thisImage.attr('src', regular);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img data-regular="https://placehold.it/350x150" data-hover="https://placehold.it/450x200" />
Also on JSFiddle.
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.
I'm running a Javascript replace function to replace standard images with class="replace-2x"on my jQuery Mobile site with Retina-quality images if the user is on a mobile device with Retina display. For example, on a Retina device, logo.png will be replaced with logo#2x.png. The JS function is here:
function highdpi_init() {
$(".replace-2x").each(function () {
var src = $(this).attr("src");
$(this).attr("src", src.replace(".png", "#2x.png").replace(".jpg", "#2x.jpg"));
});
}
$(".page").live('pageinit',function(event){
highdpi_init();
});
I'm now running into an issue where the replace function is running more than once. So for example, it replaces logo.png with logo#2x.png as the page is loading, but then as the page continues to load, it KEEPS replacing .png with #2x.png in the img src over and over so that the image tag ends up looking like this:
<img src="mobile/images/logo#2x#2x#2x#2x#2x#2x#2x#2x#2x#2x#2x.png" class="replace-2x" alt="logo" width="200">
How can I prevent this from replacing on a single img element more than once? Keep in mind, I will have multiple images on the same page, so the function will need to apply to all images, but only one time each.
The problem is surely that your 'pageinit' event is being called more than once. You can either follow MДΓΓ БДLL's idea (which won't work if images are dynamically added) or you can make your handler smarter so that it doesn't replace the src if it already was replaced
function highdpi_init() {
$(".replace-2x").each(function () {
var $this = $(this);
var src = $this.attr("src");
$this.attr("src", src.replace(".png", "#2x.png").replace(".jpg", "#2x.jpg"));
// Remove the class so it doesn't replace it again
$this.removeClass('replace-2x')
});
}
You don't need JS for this, you could do it in CSS only.
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="/css/highdpi.css"/>
You could make your images look like
<img src="transparent.gif" class="logo-a" alt="logo" width="200" />
And in highdpi.css you could do
img.logo-a {
background-image: url('file#2x.png')
}
And in lowdpi.css
img.logo-a {
background-image: url('file.png')
}
Using .one() should work since it is just a binding and if you are using Jquery Mobile the way that is suggested it will be just fine. That is unless you are passing back the html from the server. In which case it would be a good idea to add an extra condition to make sure that the src doesn't already have #2x.png before replacing.
There is disappointingly little documentation on pageinit on the offical jQuery Mobile docs. So I'm going to speculate here. It looks like pageinit is used to fire events for when a specific DOM element has finished loading, since it may not have been loaded on the initial page load (deferred until needed). That being said, it may be that adding/altering images to the DOM element in question fires the pageinit again. Could you tag each updated image with something that says, 'hey, I've already been updated to 2x'? Something such as
$.data(targetimg, 'retinafied', true);
And then check for that value before replacing the src?
I have a few images with: visibility:hidden and an onClick event which sets its visibility to visible. Images have an id of Img_(somenumber)
How can I make so that when one image is visible all others should be hidden?
Using jquery you could try the following:
Add a class to the set of images you want to manipulate their visibility. e.g.
Then for each image you could to the following for the onclick event:
<img src="{img_src}" class="myImages" onclick="$('img.myImages').hide(); $(this).show();" />
The above, of course, requires that you change each image tag.
If you cannot do that (large number of images), then try using a function that will be triggered when the document loads and will add a handler for the 'onclick' event of each image. Again this easy easily achieved using jquery or another js library.
There are a ton of ways to do this. I'm pretty sure you will want to think through it more. BUT, For an answer without jQuery. Add this as your onClick handler. Make sure you pass the this keyword.
<img onclick="toggleVisible(this);" src="" />
Include this function in your page somewhere:
function toggleVisible(clickedLI) {
var imgs = document.getElementsByTagName('img');
var i = imgs.length;
while (i--) {
var img = imgs[i];
if (img.id.indexOf('Img_' == 0)) {
img.style.visibility = img.parentNode == clickedLI ? 'visible' : 'hidden';
}
}
}
The first problem you will run into is that there is no way to bring back the hidden images. They are there, taking up space in the document, but they won't respond to the click events (at least not in Chrome.) Consider giving more detail in your question. As andreas said, if you have a lot of images there are more efficient ways.