I'm using script found here:
Automatically load an image using javascript
I'm using them to build image gallery where the main image loads thumbnail image on mouseenter, but my main image begins blank not with the first thumbnail as in the answer. I need to know how to clear the main image back to blank on mouseout of each thumbnail?
Try JQuery .mouseout() like this:
$('.thumbnails img').mouseout(function () {
this.src = '';
});
Click http://jsfiddle.net/cnx65ev0/ to see it running. Hover over the images and when you leave them, they become blank. I hope this is what you wanted.
Related
I have a responsive image gallery that currently displays thumbnails on a page, which when clicked, will enlarge the image and open it up as a modal.
The limitations of this code are that when I have opened up the image, I have to press the 'X' button, and go back to the thumbnails in order to open up another image.
What I would like, is that when the modal opens up, with the enlarged image, there is a '<' and '>' button that allows you to scroll through the enlarged images.
Any ideas how this can be done?
I hope this was clear, if not then it will make more sense when you view it as a working example here.
Thank you for your help!
Supposing the image which is being displayed at the moment is pic1 and that you have pic2, pic3, pic4 as well.
First you need to create an array in javascript containing the location of these files. Now assuming that the id of that image is "mainpic".
var a=['pic1','pic2'....'pic4'];
var l=a.length;
var currentpic=0;
function changeright(){
documnet.getElementById("mainpic").src=++window.currentpic%window.l;
}
function changeleft(){
document.getElementById("mainpic").src=abs(--window.currentpic%window.l);
}
Now for the html part you need too superimpose these signs-
<> which you can do by using position:absolute and z index:-1. You can find the examples on w3school.
It should be something like
<aaaaaaa
And in css
enter code here
#superimpose{
position:absolute/relative;
top:100px//or some other value to move the text over the pic or use "left" and "right"
}
You could use slick, I used it at work and it is really good.
$(function () {
$(".btn").on("mouseover",function(){
$(this).attr("src", $(this).attr("src").replace("images", "images/hover"));
});
$(".btn").on("mouseleave",function(){
$(this).attr("src", $(this).attr("src").replace("images/hover", "images"));
});
});
The above code is the way I change the image when the user hover on the button, when user click on it , it will redirect to other page. And the Html element is like:
<img class="btn" src="images/index_03.gif" />
The problem is , I am sure the path is correct , but when the user click on the button , during the time of loading the next page or in some case, when i hover on the image , the hovered image is not shown but broken link, why is it and how to fix it? Thanks for helping
$(this).attr("src", $(this).attr("src").replace("images/hover", "images"));
This code will reload the image, every time (or from cache).
So, during the page loading as other data is also loading at the same time, onhover image loading will be slow or broken.
I suggest you should load both images at the same time and at the same position and show/hide them on hover to get faster results.
Using CSS sprites instead of javascript calls will eliminate mouseover flickering, and reduce the total number of http requests required for your site (making it load faster).
You can achieve the same 'mouseover' functionality by using the css ':hover' pseudo element to alter the 'clip' property of the image (supported in IE6 and above).
Check out these CSS Tricks articles:
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them.
CSS Sprites with Inline Images
I am trying to create a page that holds a set of thumbnails containing images loaded in via a cms. These thumbnails have a clickable event that once clicked will open a page with all the images from that slider loaded into a slideshow of my choice.
Right now I am toying with different ideas but I wondered how easy it would be to link a page of external thumbnails to a template with a royal slider gallery so that when the thumbnail is clicked it goes to the right image in the gallery on that external page?
I know that there is the use of the api with currSlide etc. Could this be applied to the same principle of this idea so each image in the thumbnail list could have an id/number and when that is clicked it corresponds with the currSlide in the gallery and shows that one when opened?
slider.currSlideId // current slide index
slider.currSlide // current slide object
Would it also use this from the api:
slider.ev.on('rsSlideClick', function() {
// triggers when user clicks on slide
// doesn't trigger after click and drag
});
Any thoughts would be great on this.
Thanks,
Mark
This should be pretty straightforward. Using RoyalSlider you can do something like the following (where the user clicks a thumbnail link and it goes to the correct slide in the slideshow):
// Get slider instance from royalSlider data
var slider = $(".royalSlider").data('royalSlider');
// Activate the thumbnail links
$("ul#thumbnails a.fullScreenGallery").click(function(e) {
e.preventDefault();
var slideIndex = $("ul#thumbnails a.fullScreenGallery").index(this);
slider.goTo(slideIndex);
});
In my page i want to display a list of black&white images in grid view, when i hover the mouse over this image it displays the color image. When i move the mouse away, again the black&white image should be shown.
When i clicked a particular image (i.e- a black&white image) it should be turned to a color image at the same time in addition to this a tick mark image should be added.
I used the following script and html code
SCRIPT
$(".swap_image").live('click', function() {
if($(this).attr("class") == "swap_image") {
this.src = this.src.replace("_blackwhite", "_color");
$('#tick_' + $(this).attr('rel')).show();
} else {
this.src = this.src.replace("_color", "_blackwhite");
$('#tick_' + $(this).attr('rel')).hide();
}
$(this).toggleClass("color");
return false;});
HTML
<img id="tick_{{img.id}}" src="{{MEDIA_URL}}img/tick.png" style="position:absolute;" ><img rel="{{img.id}}" src="{{MEDIA_URL}}{{ img.logo_blackwhite }}" onmouseover="this.src='{{MEDIA_URL}}{{ img.logo_color }}'" onmouseout="this.src='{{MEDIA_URL}}{{ img.logo_blackwhite }}'" class="swap_image" />
I used the above code, all works fine but when i move the mouse out again the image turns black&white image (because i used mouseout function)
Is there any other better idea available? or
How to overcome from this issue? Thanks in Advance
I would suggest adding a class to the image when you click. Then when the mouseout function execute, simply include an if/then that only swaps the image back to black and white if the class is NOT present.
When you click the Image Then Leave some Footprint there. Like change the Class of the Image,
now in your mouseout function check the condition if the image has that particular class or not. If there do nothing, else change the image color.
I am developing jquery image gallery plugin.
I checked loading of the image like this:
$("#loading").show();
$('.preview').load(function () {
$("#loading").hide();
});
But I didnt success.
I want to show loading gif when my image is loaded.How can I do this? For ex:
http://blueimp.github.com/Bootstrap-Image-Gallery/
You can simple give it through css. Try giving the loading image as background for the parent div