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>
Related
I am trying to make a button for each picture that will hide the other two. For example if I click the button for the left image, the left image will show and it will hide the middle and right pictures. HTML needs to stay the same, any suggestions?
<div id="works">
<figure data-artist="left">
<img src="david.jpg" alt>
<figcaption>left image</figcaption>
</figure>
<figure data-artist="middle">
<img src="david-plaster.jpg" alt>
<figcaption>middle image</figcaption>
</figure>
<figure data-artist="right">
<img src="florence-cathedral.jpg" alt>
<figcaption>Right image</figcaption>
</figure>
</div>
<div id="controls">
</div>
<script>
var hideShowButton = document.getElementById("hideShowButton");
hideShowButton.onclick = function() {
var allImages = { left: "left", center: "middle", right: "right" };
if(document.getElementById("michelangelo").style.visibility == 'visible') {
for (var image in allImages) {
document.getElementById(allImages[image]).style.visibility = 'hidden';
}
document.getElementById("hideShowButton").innerHTML = "Hide";
}
}
</script>
When the button inside div controls is clicked, he execute the function showImage().
This function get all figure elements and set a display as none.
Then we get the attribute data-artist of the element that trigger the function, that is the same as the figure, and add a display style as block on the figure that has the same attribute data-artist that the element.
function showImage(event){
var objClass = event.getAttribute("data-artist");
var elems = document.getElementsByTagName("figure");
for (var i=0;i<elems.length;i++)
elems[i].style.display = 'none';
var element = document.querySelector('figure[data-artist='+objClass+']');
element.style.display = 'block';
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="works">
<figure data-artist="left">
<img src="david.jpg" alt>
<figcaption>left image</figcaption>
</figure>
<figure data-artist="middle">
<img src="david-plaster.jpg" alt>
<figcaption>middle image</figcaption>
</figure>
<figure data-artist="right">
<img src="florence-cathedral.jpg" alt>
<figcaption>Right image</figcaption>
</figure>
</div>
<div id="controls">
<button data-artist="left" onclick="showImage(this);">left</button>
<button data-artist="middle" onclick="showImage(this);">center</button>
<button data-artist="right" onclick="showImage(this);">right</button>
</div>
</body>
</html>
<div id="works">
<figure data-artist="left">
<img src="david.jpg" id="image1" alt>
<figcaption>left image</figcaption>
<button onclick="hideshow('1');">Choose</button>
</figure>
<figure data-artist="middle">
<img src="david-plaster.jpg" id="image2" alt>
<figcaption>middle image</figcaption>
<button onclick="hideshow('2');">Choose</button>
</figure>
<figure data-artist="right">
<img src="florence-cathedral.jpg" id="image3" alt>
<figcaption>Right image</figcaption>
<button onclick="hideshow('3');">Choose</button>
</figure>
</div>
<div id="controls">
</div>
<script>
function hideshow(buttonpressed) {
var img1 = document.getElementById("image1");
var img2 = document.getElementById("image2");
var img3 = document.getElementById("image3");
if(buttonpressed==1) {
img1.style.visibility == 'visible';
img2.style.visibility == 'hidden';
img3.style.visibility == 'hidden';
}
if(buttonpressed==2) {
img1.style.visibility == 'hidden';
img2.style.visibility == 'visible';
img3.style.visibility == 'hidden';
}
if(buttonpressed==3) {
img1.style.visibility == 'hidden';
img2.style.visibility == 'hidden';
img3.style.visibility == 'visible';
}
}
</script>
If there will be many buttons (not 3), approach would be different than this
Hope this helps
We're trying to make a school project like an online delivery system.. but it will have a little tweak like drag and drop system and food customization. Like when you drag a sauce to the main image which is a bowl of rice. it would automatically change the image to a rice with sauce. sane as protein veggies and more.
I'm trying to figure out how to change image or adopting it to the main image while i drag and drop it also.. changing some of its attributes in CSS.
Also maybe there's a function that when I drag a specific image it would change the main image to a different image not the dragged one.
function doFirst(){
mypic = document.getElementById('img1');
mypic.addEventListener("dragstart", startDrag, false);
mypictwo = document.getElementById('img2');
mypictwo.addEventListener("dragstart", startDrag2, false);
mypicthree = document.getElementById('img3');
mypicthree.addEventListener("dragstart", startDrag3, false);
mypicfour = document.getElementById('img4');
mypicfour.addEventListener("dragstart", startDrag4, false);
leftbox = document.getElementById("mainbox");
leftbox.addEventListener("dragenter", function(e) {e.preventDefault();}, false);
leftbox.addEventListener("dragover", function(e) {e.preventDefault();}, false);
leftbox.addEventListener("drop", dropped, false);
}
//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e){
var code = '<img id="img1" src="images/image1.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag2(e){
var code = '<img id="img2" src="images/image2.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag3(e){
var code = '<img id="img2" src="images/image4.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag4(e){
var code = '<img id="img2" src="images/image5.jpg">';
e.dataTransfer.setData('Text', code);
}
//--------------startDrag FUNCTIONS -----------------------//
function dropped(e){
e.preventDefault();
leftbox.innerHTML = e.dataTransfer.getData('Text');
var code = '<img id="centerimg" src="images/center.png">';
ondrop
}
function drop(event){
event.preventDefault();
var code = '<img id="img2" src="images/image5.jpg" width="300px" height="300px">' ;
}
window.addEventListener ("load", doFirst, false);
#centerimg{
width:500px;
height: 500px;
}
#img2, #img1, #img3, #img4{
width:150px;
height: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="drag.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" id="1box">
<img id="img1" src="images/image1.jpg">
</div>
<div class="col-md-3" id="2box">
<img id="img2" src="images/image2.jpg">
</div>
<div class="col-md-3" id="3box">
<img id="img3" src="images/image4.jpg">
</div>
<div class="col-md-3" id="4box">
<img id="img4" src="images/image5.jpg">
</div>
</div>
</div>
<div class="row">
<center><div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
<img id="centerimg" src="images/center.png">
</div></center>
</div>
</body>
</html>
At a website I am displaying images in 5x 5 grid, using . On the last picture, custom parts, I wish to display a rotating images. This panelGallery js script works fine on all screen sizes apart from 15" screen, when testing, where the whole of the 15" screen is gets occupied by magnified version of the small rotating images, covering all the images behind.
Any help to solve this pestering problem would be much welcome.
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.panelgallery-1_1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#container').panelGallery();
});
</script>
<script>
if( self == top ) {
document.documentElement.style.display = 'block' ;
} else {
top.location = self.location ;
}
</script>
</head>
<div class="PZ3zoom PZ3-r Bdr Cap Lnk" style="width:130px; height:104px;"><a href="http://www.hpcgears.com/n/products/16.custom_products/custom_parts.php" onclick="return true">
<div id="container">
<img alt="" src="1.images/images_special/plastic1.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gear.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gear2.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/custom1.gif" name="tb" width="130" height="104" />
<img alt="" src="1.images/images_special/double_gears.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gearbox.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gearbox3.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/custom2.gif" name="tb" width="130" height="104" />
<img alt="" src="1.images/images_special/gearbox2.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gear3.jpg" name="tb" width="130" height="104"/></div>
<span class="PZ3inr"> <em><span style="color:#ccf; background:inherit;">Custom parts</span></em></span></span></a>
Custom Parts
A live example would help provide a better example.
however, here's my fix - not knowing all the moving parts(css, the js library you are using, etc..). So I suggest making a CSS class and creating a fixed max width to prevent it from displaying huge at 15 inches wide.
Try a media over-ride on the container
<div class="container">...</div>
a CSS solution
#media screen and (max-width: 1800px) {
.container { width:1800; }
}
or you just just set a max-width on that div
.container { max-width:1800px; }
Now instead of 1800px use whatever screen width the images displayed correctly at.
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.
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.