Switching image with a fade in
Question
I'm working on a site here:
http://mccarronandco.com/newsite/modena.php
They've now decided they want the pictures to fade in when you click a thumbnail rather than just have the image switch. The current code is:
<div id="mainimage">
<img src="images/modena/2.jpg" alt="holder" name="holder" id="holder">
</div>
<div class="gallerycontainer">
<div class="thumbnail">
<img src="images/modena/thumbs/2.jpg" alt="Modena" name="modena" width="75" height="56" title="Modena" onClick="document.holder.src='images/modena/2.jpg'" >
</div>
Can anyone suggest a way I can achieve this please? I don't know where to start, I got the above code from a forum...
Many thanks,
Andy
4 answers
solution1
0 2013-09-27 12:05:14
I'm not sure how to do this is pure JavaScript but have you given any through to using the jQuery library? It has fadeIn() and fadeOut() methods to make this sort of thing very easy. You would create a function like
function fadeImage(imageURL)
{
$("#holder img").fadeOut(300, function(){
$("#holder img").attr('src', imageURL);
$("#holder img").fadeIn();
});
}
and then call it and pass through the URL of the image you want to fade in.
solution2
0 2013-09-27 12:05:27
You can implement jQuery to do this. Download the JS file or use a CDN that hosts jQuery and add it to your websites <head> section
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
And then add the following code to your <head> section :
<script type="text/javascript">
function SetImg(URL) {
//Fade out the Current Image
$('#holder').fadeOut('slow', function() {
//Set the new Image URL
$('#holder').attr('src', URL);
//Fade In the new image
$('#holder').fadeIn();
});
}
</script>
And your IMG html will become :
<img src="images/modena/thumbs/2.jpg" alt="Modena" name="modena" width="75" height="56" title="Modena" onClick="SetImg('images/modena/2.jpg');" >
What this does is bind the onclick event of the Img tag to the function SetImg , and you pass the URL of the image you wish to set it to. Inside the SetImg function it finds the control with ID = holder and sets the SRC attribute. And then calls the fadeIn() function of that element.
See jQuery API Documentation for more information on the API.
Edit : (To answer a comment question)
Code to only fadeIn the new image :
<script type="text/javascript">
function SetImg(URL) {
//Hide current image
$('#holder').hide();
//Set the new Image URL
$('#holder').attr('src', URL);
//Fade In the new image
$('#holder').fadeIn();
}
</script>
solution3
0 2013-09-27 12:07:44
这个 jQuery插件将允许您通过在用户单击图像之一时简单地调用以下方法来循环显示图像。
$('#fade').cycle();
solution4
0 2013-09-27 12:28:32
One simple solution is to set the CSS for the image-holder as ,
#mainimage
{
-webkit-transition: background-image 0.2s ease-in-out;
-moz-transition: background-image 0.2s ease-in-out;
-ms-transition: background-image 0.2s ease-in-out;
-o-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}
and instead of an img tag, use background-image CSS property. And edit this line too,
<img src="images/modena/thumbs/2.jpg" alt="Modena" name="modena" width="75" height="56" title="Modena" onClick="document.holder.style.backgroundImage = 'images/modena/2.jpg'" >
This way you dont have to include any plugins.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.