|
JavaScript - Overlapping Image Viewer - On Click?
Overlapping Image Viewer Script
http://www.javascriptkit.com/script/...geviewer.shtml It works perfectly. Just as advertised. It currently changes the images with the mouse over and out effect. But I would like to change it so that the visitor must click on the thumbnail image to enlarge it and to click on the enlarged image to send it back to thumbnail size. It would also be helpful to have the enlarged image appear about 25 px below the top of the thumbnail while remaining flush with the left side. Thank you for your time .... viki barefoot Similar TutorialsHello, I have a media page for my band website. I am putting an image gallery on this page. I have a set of images within a div. What I want to achieve, is when any image is clicked, I want that image to 'fade in' over the top of the images - with a larger height and width. Effectively, I want to open the image without having to navigate along with the anchor tag to a separate page. With this, I want the user to be able to close the image by clicking the larger scaled image. When that certain image has faded in above the images I want all the other images to be unclickable until the user has closed the current image. I have a live example at this site: Band - Media Page. I have a simple jquery effect already on the page which i used from watching a tut. I have no idea where to start. I did start by creating this code: Code:
function showImage(that) {
var img = that.src; //sets the var 'img' to the src of the image which was passed in
img = img.substr(img.lastIndexOf('/')+1); //Retrieves the file name, stores in 'img'
return true;
}
But, I'm just not sure where to go after this. Please take no notice of the header and menu as these are mis-aligned and I need to set certain things properly, though this is another matter in itself. Thank you in advance for any help you can give me. Regards, LC. I'm using the BackBox Script for image viewing on my HTML doc. However, the code is good for the use of one thumbnail with images that can be loaded. What if I want more than one thumbnail image using its own set of images? How can I have multiple thumbnails with their own set of large images to view? Does that make since? Any help would be much appreciated! Kenneth Hi, Hope that someone can help me with a little problem I have. I building a little page that has some photos of the family. Ive created little thumbnails and large versions of each image. What im trying to achieve is that in div a: i have each of the thumbnails and in div b: it displays a large verison on the image thats clicked. Ive seen a few methods when searching using java and ajax etc, but i'm not sure which is the best way to do this and the most simple so that I dont have to create a new page for each image. Thanks for your help in advance. Hi I was wondering I really like the image viewer Gamespot uses. example: http://www.gamespot.com/wii/action/s...&tag=thumb%3B1 Anyone know how to make one like that? Thanks for any replies. I've used the Backbox Image Viewer from http://www.javascriptkit.com/script/script2/backbox/ on this website for over 3 years and this problem just arose with the update of IE to version 9. When you click the link to open the gallery, instead of backbox opening normally, a small all white box appears in it's place. No navigation images or gallery images or anything. You can view the issue here at http://www.joewheelerknifemaker.com and by clicking on "Knives by Joe, Photo Gallery". I know that this happens on multiple computers using IE9, but works perfectly in Firefox, Safari and Chrome from what I can tell. Anyone have any ideas or know what IE changed in this version that could be causing this? Thanks in advance. Hello everyone! I'm using Cut & Paste Plus Size image viewer ( http://www.javascriptkit.com/script/...geviewer.shtml ) , but I noticed some problem. When the large image is loaded initially, it's not always positioned on the center of the page. After that the script works just fine, until the browser is re-started. There is link to my page: http://www.accentironwork.com/yard%20decorations.html Script code is the http://www.accentironwork.com/plusimageviewer.js http://www.accentironwork.com/plusimageviewer.css I hope some body can help me. Thanks in advance! I need help implementing what appears to be a simple javascript : http://www.javascriptkit.com/script/...ivviewer.shtml Quote: Directions: Add the below script to the HEAD section of your page: Code: <script src="DV.js" type="text/javascript"> /*********************************************** * Pagination Combo Box- by Axel Schneider (http://axelschneider.info/) * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more * Please keep this notice intact ***********************************************/ </script> <script type="text/javascript"> //Define your images using arbitrary variables, to be passed in as arguments later down the page: var bigbaby = '<img src="bigbaby.jpg" width="1075" height="717" border="0" alt="">' var pancake = '<img src="food1.jpg" width="300" height="375" border="0" alt="">' </script> <script src="DV.js" type="text/javascript"> /*********************************************** * Pagination Combo Box- by Axel Schneider (http://axelschneider.info/) * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more * Please keep this notice intact ***********************************************/ </script> <script type="text/javascript"> //Define your images using arbitrary variables, to be passed in as arguments later down the page: var bigbaby = '<img src="bigbaby.jpg" width="1075" height="717" border="0" alt="">' var pancake = '<img src="food1.jpg" width="300" height="375" border="0" alt="">' </script> <script src="DV.js" type="text/javascript"> /*********************************************** * Pagination Combo Box- by Axel Schneider (http://axelschneider.info/) * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more * Please keep this notice intact ***********************************************/ </script> <script type="text/javascript"> //Define your images using arbitrary variables, to be passed in as arguments later down the page: var bigbaby = '<img src="bigbaby.jpg" width="1075" height="717" border="0" alt="">' var pancake = '<img src="food1.jpg" width="300" height="375" border="0" alt="">' </script> <script src="DV.js" type="text/javascript"> /*********************************************** * Pagination Combo Box- by Axel Schneider (http://axelschneider.info/) * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more * Please keep this notice intact ***********************************************/ </script> <script type="text/javascript"> //Define your images using arbitrary variables, to be passed in as arguments later down the page: var bigbaby = '<img src="bigbaby.jpg" width="1075" height="717" border="0" alt="">' var pancake = '<img src="food1.jpg" width="300" height="375" border="0" alt="">' </script> You also need to download the below external JavaScript file: DV.js Then, to create a link that pops up an image when clicked on, do the following: Code: <a href="#" onClick="dv.showDV(pancake); return false">pancakes</a> Where pancake is the variable containing the image tag to be shown (see code in your HEAD section. Obviously this works on image links as well. I do not need a text link, I want the image to be displayed on a mouse click over the thumbail. I have tried to incorporate the HTML as follows : Code: <html> <head> <TITLE>Test</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META NAME="Description" CONTENT="Test"> /*********************************************** * Pagination Combo Box- by Axel Schneider (h**p://axelschneider.info/) * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more * Please keep this notice intact ***********************************************/ </script> <script type="text/javascript"> //Define your images using arbitrary variables, to be passed in as arguments later down the page: var image = src="Images/SNICTI__Stationery_1_by_caprozo.jpg" width="2133" height="1600" border="0" alt="">' </script> </head> <body bgcolor="#000000" text="#000000"> <body bgcolor="#000000" vlink="#000000" alink="#0000FF" link="#000000"> <font size="3" face="Tahoma"> <div align="center"> <center> <p> <img src="Images/SNICTI__Stationery_1_by_caprozo_small.jpg" width="100" height="100" border="0"></p> </center> </div> </font> <p> </body> </html> I use the tutorial from http://www.javascriptkit.com/script/...geviewer.shtml and create an overlap image viewer. But whenever I use Firefox or IE to open my webpage, the overlap image viewer is not shown on the website. In other words, only the image link hint is shown when my mouse is over the image. I know when i open the page with java scripts, IE or Firefox will usually has a warning and ask the user if you want to run scripts or ActiveX. But the page with overlap image viewer I created will not invoke any pop-up blocker warnings and at least let a user have an option to see my overlap image. what should i add to make the overlap image viewer show in a proper way after opening IE or Firefox? Hello, I'm hoping someone can help me with a problem. I have downloaded and installed the Cut & Paste BackBox Image Viewer: http://www.javascriptkit.com/script/...ox/index.shtml When I click the image to activate the script, the pop-up displays at the very bottom left of the page. It's also not formatted correctly. For instance, I'm unable to see the Auto and Close buttons, the caption information is at the top and things are just generally out of whack. Everything seems to be in the correct directories. I've tried cutting and pasting the script into a plain document and the same thing happens. I'm working on this locally, so I don't have a live example. Can someone please help. I've been working at this for two days and just about wanna scream. lol Thank you in advance for your response. I have followed all the correct steps to the Javascriptkit code for Plus Size Image Viewer: http://www.javascriptkit.com/script/...eviewer.shtml# Everything works fine but the Enlarge Image buttons are not where they should be. They should all appear at the bottom left of each individual image and are floating up. See example he http://www.bannerpen.ca/plastic_glossy.html Im not sure if the problem is the position or the display or none in the plusimageviewer.css script?? [CODE] .enlargecaption{ position: absolute; border: 1px dotted navy; font: normal 11px Arial; } .enlargecaption a{ display:block; background: lightgray; /*bg color of caption*/ padding: 3px; text-decoration: none; color: black; } .enlargecaption a:hover{ background: lightyellow; /*bg color of caption when mouse rolls over it*/ } .enlargebox{ position: absolute; border:1px solid gray; display:none; } .enlargebox .title{ background:gray; color:white; padding: 3px 2px; text-align: right; font:bold 14px Arial; } .enlargebox .title img{ cursorointer; cursor:hand; } [CODE] Just curious if anyone has a crossbrowser version of the Popup Image Viewer script that's in the Post a JavaScript section. Seems that all of the ones in there (original and modifications) are browser specific, whereas I need something that will work for all browsers, or at least IE and firefox.
Hi I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code. Here code I have now.... Code:
<style type="text/css" media="screen">
#wrapper {
background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
width: 470px;
margin: 0 auto;
}
a#sun{
background: url('_assets/images/sun-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#sun:hover,
a#sun.active {
background: url('_assets/images/sun.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#plane {
background: url('_assets/images/plane-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#plane:hover,
a#plane.active {
background: url('_assets/images/plane.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#nano {
background: url('_assets/images/nano-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#nano:hover,
a#nano.active {
background: url('_assets/images/nano.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}
#popuptext a {
color: #ff6600;
padding: 0 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#"></a>
<a id="plane" href="#"></a>
<a id="nano" href="#"></a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// target each link in the navigation div
$('#navigation a').click(function() {
// link that you clicked
clicked = $(this).attr('id');
// make sure that all the others are not active
// except for the clicked one
$('#navigation a').each(function() {
if ($(this).attr('id') == clicked) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// prevent the default link action
return false;
});
});
</script>
What jquery or javascript code do I need to do this? thanks, chaser Hi, I am still designing the website and want some flexibility. I am capturing the mouse clicks fine on top of an image, but the coordinates are absolute and not relative to the image. How can I capture mouse clicks relative to the image so that I can move the image anywhere in my website? Thanks! I have about 40 images on an educational website. When the user clicks each image, a different one second long mp3 should play without opening a new window. Is it possible to do this with javascript? Thanks in advance. I'm sure this question has been asked, but I tried searching for this answer using many different keywords, but I don't know the correct terminology for my question, as the search results turn up other topics. I'm wondering if there's simple code for clicking on a thumbnail to have a larger version of the picture appear above, but still within, the same webpage, and the background darkens a little. The larger picture has a "close" button, which you click to get back to the underlying original page. An very simple example of the type I'm looking for is he http://www.salon.com/comics/tomo/200...omo/index.html I'm assuming this is a java script that does this. I'm using DreamWeaver. Does Adobe have this type of coding in their "Spry" coding? If not, is there a simple template of the code out there? Thank you for any help. What is the correct code to make a sound play every time you click a certain image? All the codes I've found online aren't working, or I'm not inputting something correctly..
Hi, I want to load an image when a user clicks a link on my page. The image is a tracking pixel for an affiliate network, so it doesn't need to be visible to the user (as it's not an image anyway but a php file). I assume this would use the onclick event. Can anyone help? I have a sitelock.com image on my website that when clicked on, shows info that my site is verfifed through them. However, when clicking on the image it opens up in a whole new window. Pathetic sitelock.com will offer no support in getting this in a popup window. I need some help please in getting this to open in a popup window that I can resize to any size I want and to only have the address bar showing up top, no toolbars or anything else. My website is in joomla and I have a plugin called 'sourcerer' that will allow me to insert code anywhere i want. Here is the code that sitelock.com gave me: <a href="https://www.sitelock.com/verify.php?site=ecig-skins.com" target="_blank" ><img alt="website security" title="SiteLock" border="0" src="//shield.sitelock.com/shield/ecig-skins.com"/></a> Any help is appreciated hi master. I need some help. I need a function that change multiple images on click maybe by id Ex.: PHP Code: <table> ..... <td><img src="folder1/image1.jpg"></td> <td><img src="folder1/image2.jpg"></td> <td><img src="folder1/image3.jpg"></td> <td><img src="folder2/image1.jpg"></td> <td><img src="folder2/image2.jpg"></td> <td><img src="folder2/image3.jpg"></td> ..... </table> NOW BUTTONS (IMAGES) PHP Code: <!-- clicking this imagen will change to another button image and will change the folder1/image1.jpg and folder2/image1.jpg --> <div><img src="buttons/buton1.jpg" alt=""></div> <!-- clicking this imagen will change to another button image and will change the folder1/image2.jpg and folder2/image2.jpg --> <div><img src="buttons/buton1.jpg" alt=""></div> <div><img src="buttons/buton2.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div> <!-- clicking this imagen will change to another button image and will change the folder1/image3.jpg and folder2/image3.jpg --> <div><img src="buttons/buton3.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div> really, I don't know much about javascript, I'm waiting for your help. actually, I have loaded jquery-1.2.6.min.js |
|||||||