Here my code.. when I click on thumbnail of image Image will display it's ok..
now I need to change the images auto.. not click event ,
so help me to change this javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#img').hide();
$('#img').fadeIn('slow');
$('#img').html('<img src="' + image + '" class="img"/>');
$('#img').
return false;
});
});
</script>
<style>
.img{
border:4px #666 solid;
width:410px; height:350px;
}
.thumb{
float:left;
height:60px;
width:80px;
padding:10px;
}
</style>
<div id="img" ><img src="../content/ohoopee1.jpg" border="0" style="width:410px; height:350px;border:4px #666 solid;" /></div>
<img src="../content/ohoopee1.jpg" class="thumb" border="0"/>
<img src="../content/ohoopee2.jpg" class="thumb" border="0"/>
<img src="../content/ohoopee3.jpg" class="thumb" border="0"/>
<img src="../content/ohoopee4.jpg" class="thumb" border="0"/>
Help to this......
http://jonraasch.com/blog/a-simple-jquery-slideshow
you can go through this tutorial.
Related
I use lazy loading to load the images with the centered background loading icons, but I felt unnecessary to include the lazy loading effect in this question. I want to remove the loading icon after the image is loaded because the smaller images may not cover the loading icon.
I use the same external CSS file for loading icons. None of the closest solutions worked for me.
Any suggestions and help would be appreciated.
HTML
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/kn7VW.jpg" alt="Large Image" width="800" height="380" />
</div>
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/BsJCI.jpg" alt="Small Image" width="250" height="180" />
</div>
CSS
.wrapper {
background: url(https://i.stack.imgur.com/yW2VY.gif) no-repeat center;
min-height: 220px;
}
You can implement onload event of image, inside it remove class wrapper as
$(".lazy").on('load', function() { $('.wrapper').removeClass('wrapper'); })
Update: if you want to remove only loading for each image change to remove parent class only.
$(this).parent().removeClass('wrapper');
$(".lazy").on('load', function() { $(this).parent().removeClass('wrapper'); })
.wrapper {
background: url(https://i.stack.imgur.com/yW2VY.gif) no-repeat center;
min-height: 220px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/kn7VW.jpg" alt="Large Image" width="800" height="380" />
</div>
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/BsJCI.jpg" alt="Small Image" width="250" height="180" />
</div>
I have two SVG image files. When I click on an image another image must be displayed (similar to tab). I tried it with the following:
jQuery("#infoToggler").click(function() {
jQuery(this).find('img').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="infoToggler">
<img src="http://tympanus.net/PausePlay/images/play.png" width="60px" height="60px" />
<img src="http://maraa.in/wp-content/uploads/2011/09/pause-in-times-of-conflict.png" width="60px" height="60px" style="display:none" />
</div>
JSFiddle here
This is not working. Could someone please help me?
Edit 01
<html>
<head>
.image{
position:absolute;
top:10px;
left:10px;
z-index:1;
}
.image1{
position:absolute;
top:10px;
left:10px;
z-index:1;
}
.image3{
position:absolute;
top:10px;
left:10px;
z-index:1;
}
.image4{
position:absolute;
top:10px;
left:10px;
z-index:1;
}
</head>
<body>
<img src="image1.svg" class="image"/>
<img src="image2.svg" class="image1"/>
<img src="image3.svg" class="image2"/>
<img src="image4.svg" class="image3"/>
</body>
</html>
These are 4 class I have in CSS. I need to display 2 image and toggle 2 image separately.Like tab menu when I click one tab image must toggle and if i click another tab that must toggle. When I click image1 then image2 must be displayed and if I click image3 then image4 must be displayed
I have created jsfiddle sample.
Visit SVG image toggle jsfiddle
$("#svgImg").on("click", function() {
if(flag) {
$(this).attr("xlink:href", "http://maraa.in/wp-content/uploads/2011/09/pause-in-times-of-conflict.png");
flag = false;
}
else {
$(this).attr("xlink:href", "http://tympanus.net/PausePlay/images/play.png");
flag = true;
}
});
I am new to JavaScript. I would like to have the preview image be a clickable link to an even larger image in a separate window. Just like Amazon or eBay. Below is the code I have so far and it works great for the mouse over and preview but I can't figure out how to get a clickable link to the enlarged image. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
.preview {
width:350px;
height:150px}
.thumb {
width:125px;
height:50px}{
margin-right:3px;}
.normal {
border:3px solid #000000;}
.selected {
border:3px solid #ff0000;}
</style>
</head>
<body>
<img id="0" class="preview normal" src="" alt="preview" /><br>
<p>
<img id="1" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6ZTlhOGY1ZjBhY2UyNjMwMjE4MDJjMzZhODM2NGY2OWI=" alt="Red Belt Blk Buckle" onmouseover="preview(this)"/>
<img id="2" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6MzIxOWZhZmQyZTZkZTg1ZDQzYjI4MmIyYzU1MWU2Njg=" alt="Red Belt Nkl Buckle" onmouseover="preview(this)"/>
<img id="3" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6MjlhOTQ1N2Y4OGM2Y2I4OWIzY2I4YjZiMjU2N2MxZmM=" alt="Red Waist" onmouseover="preview(this)"/>
<p>
<img id="4" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6YjE5MWRmMThhOTE3YWFjMzlkNDcyYzcwMWIxNzRlMWE=" alt="Red Waist" onmouseover="preview(this)"/>
<img id="5" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6ZTlkMzY0YWZkMDUzNjcxNzlkMTRhZTIyZjFmOTk1YTM=" alt="Red Blk Buckle" onmouseover="preview(this)"/>
<img id="6" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6YzdkZjcyZWVkZWQ1Y2Y4NjY2ZDFhY2EzYjU2NDA3OWQ=" alt="Red Nkl Buckle" onmouseover="preview(this)"/>
<script>
var lastImg = 1; //Set initial thumbnail and preview
document.getElementById(0).src = document.getElementById(lastImg).src;
document.getElementById(lastImg).className = "thumb selected";
function preview(img) {
document.getElementById(lastImg).className = "thumb normal";
img.className = "thumb selected";
document.getElementById(0).src = img.src;
lastImg = img.id
}
</script>
</body>
</html>
I have an imagemap and want to use the show function to fade in some, rectangle div. But it's not responding.
Javascript
<script type="text/javascript">
$(".levert").click(function () {
$("#popUpDiv").show("slow");
});
</script>
HTML
<img id="logo" src="./logo2.png" alt="Phlox" usemap="#links"><p class="logotext">Phlox</p></img>
<map name="links">
<area shape="circle" coords="294,46,46" href="#" class="levert"></area>
</map>
</div>
<div id="popUpDiv" style="display:none">
</div>
CSS
#popUpDiv {
position:absolute;
background-color:#3F6;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
}
Wrap your code in a document ready call:
<script type="text/javascript">
$(document).ready(function() {
$(".levert").click(function() {
$("#popUpDiv").show("slow");
});
});
</script>
Works for me in Fx17 and Chrome 22 on Mac if I do it after the page loads
$(function() { .... });
DEMO
I have the code below,and I want to images to be change with a fade,the images now are been replaced by the function 'changeBg',but they are just been replaced without fade.
how can I "merge" between the function that's changing the images and the function that in charge of the fade.
thanks.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>none</title>
<link rel="stylesheet" type="text/css" href="Css/design.css" >
<script src="query-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(document).ready(function() ({$('').fadeIn(1000);
});
</script>
<script language="JavaScript">
function changeBg (color) {
document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-repeat";}
</script>
</head>
<body>
<div id="wrapper" class="wrapper">
<div class="logo"><img border="0" src="Images/logo.png" >
</div>
<div class="menu">
<img border="0" src="Images/arrowleft.png" >
<img border="0" src="Images/black.png" onclick="changeBg(this.name);" name="black">
<img border="0" src="Images/blue.png" onclick="changeBg(this.name);" name="blue">
<img border="0" src="Images/fuksia.png" onclick="changeBg(this.name);" name="fuksia">
<img border="0" src="Images/brown.png" onclick="changeBg(this.name);" name="brown">
<img border="0" src="Images/orange.png" onclick="changeBg(this.name);" name="orange">
<img border="0" src="Images/red.png" onclick="changeBg(this.name);" name="red">
<img border="0" src="Images/grey.png" onclick="changeBg(this.name);" name="grey">
<img border="0" src="Images/white.png" onclick="changeBg(this.name);" name="white">
<img border="0" src="Images/arrowright.png" >
</div>
</body>
</html>
Thanks!
If I understand you correctly, you might be able to fade the background out, change it, then fade it back in again? Like this:
function changeBg (color) {
$('#wrapper').fadeOut(1000,function(){
$(this).css('background','url(Images/'+color+'.jpg) no-repeat').fadeIn(1000);
});
}
The cross-fading (fade out while fading in) is achieved in jQuery by having the statements straigh in line and not inside functions from previos animation.
Also, I understand that you want JUST THE BACKGROUND IMAGE to fadeout and fadein; not the actual contents of the page.
To achieve that, make your background image a separate item altogether but inside of the main div you have backgrounded:
<div id='wrapper' style='position:relative' > <!-- must be relative -->
<img id='bg1' src='initial.image' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
<img id='bg2' src='initial.imageTWO' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
</div>
function changeBackground(which) {
$('#bg'+which).attr('src','current-image.xxx').fadeOut('slow');
which = (which = 1) ? 2 : 1;
$('#bg'+which).attr('src','next-image.xxx').fadeIn('slow');
setTimeout('changeBackground('+which+')',2000);
}
$(document).ready( function () {
$('#bg1').attr('src','image-name.xxx').fadeIn('slow');
setTimeout('changeBackground(1)',2000); //every 2 seconds?
. ......
});
In case you have various images for the "slide show", you might want to add a random
number generation for which picture to show next.