|
JavaScript - Need Help With Simple Divviewer Image Viewer
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> 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. 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. 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. 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 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? 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! 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 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. 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.
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] I'm looking for some kind of font veiwer to put on my website where a user enters text in a box, selects the font then the entered text is displayed in the selected font. A bit like the one they use on DaFont.com. I don't know if this is done with javascript or not. Can anyone help a newbie? Hi a few days back a friend of my suggested it would look need to use a javascript screenshot viewer on my website. Now he provided me with the code but now i need to know how I can link to the larger images in a link. my friend didnot have time so im kind of stuck. hope anyone can help me out. This is the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
var res_shots = new Array();
var res_ids = new Array();
var sel_screen = 4;
function screens_prev() {
if (sel_screen > 1) {
sel_screen --;
} else {
sel_screen = tot_screens;
}
try {
document.getElementById('screenshot_image').src = res_shots[sel_screen].src;
document.getElementById('screenshot_status').innerHTML = sel_screen + ' / ' + tot_screens + ' Screenshots';
}
catch(e) {
}
}
function screens_next() {
if (sel_screen < tot_screens) {
sel_screen ++;
} else {
sel_screen = 1; }
try {
document.getElementById('screenshot_image').src = res_shots[sel_screen].src;
document.getElementById('screenshot_status').innerHTML = sel_screen + ' / ' + tot_screens + ' Screenshots';
}
catch(e) {
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<table width="300px">
<tr>
<td>
<span>// <b>Screenshots</b></span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<script>
var tot_screens = 7;
res_ids[1] = 239560; res_shots[1] = new Image(); res_shots[1].src = 'screenshot-smal-1.jpg';
res_ids[2] = 239559; res_shots[2] = new Image(); res_shots[2].src = 'screenshot-smal-2.jpg';
res_ids[3] = 239558; res_shots[3] = new Image(); res_shots[3].src = 'screenshot-smal-3.jpg';
res_ids[4] = 239557; res_shots[4] = new Image(); res_shots[4].src = 'screenshot-smal-4.jpg';
res_ids[5] = 239556; res_shots[5] = new Image(); res_shots[5].src = 'screenshot-smal-5.jpg';
res_ids[6] = 239555; res_shots[6] = new Image(); res_shots[6].src = 'screenshot-smal-6.jpg';
res_ids[7] = 239554; res_shots[7] = new Image(); res_shots[7].src = 'screenshot-smal-7.jpg';
</script>
<a href="screenshot-big-4.jpg" id="screenshot_inlarge"><img src="screenshot-smal-4.jpg" id="screenshot_image"></a>
<table>
<tr>
<td>
<a href="javascript:screens_prev();"><img src="prev.gif" border="none"></a>
<a href="javascript:screens_next();"><img src="next.gif" border="none"></a>
</td>
<td>
<span id="screenshot_status">4 / 7 Screenshots</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I am hoping someone can help with this script I found on Javascriptkit.com. Content Viewer: http://www.javascriptkit.com/script/...ntviewer.shtml Basically, the first hidden div to be shown automatically, nor do I want that div to be preselected. As their demo shows: "Page 1" is auto highlighted and the fist div class named "fadecontent" is shown. How can I get around this and have something shown (as a holder, until something else is clicked and shown)??? And also not have anything preselected/highlighted??? Any and ALL Suggestions are very much appreciated. Oh, I kinda figured out how to have something else shown; acting as a cover up. Simply by changing the z-index in the contentfader.js file, and creating an additional div with a higher z-index. However, and of course, the "fadecontent" class remained highlighted automatically, and too, there was is no way to make that layer visible without first clicking on something else. Hope all that made some sort of sense to someone Thanks! Tracy Hi, I've added this JavaScript to my site; http://www.javascriptkit.com/script/script2/backbox/ It's working 100% on Safari, Chrome and Firefox. When I try to run it on Internet Explorer it just doesn't work. I click the image I want to view, a white box comes up with the loading bar, but after 5-10 seconds the loading bar goes and a small white box stays. I've left it for a minute to see if it's downloading any files, but it's not (Tested it on my actual .co.uk site) If anyone could give me a hand I would be very greatful. Thanks guys. John Hi everyone, I'm new here. This is my problem: I have a project done in Java that I would like to publish on the web. To do this I need some javascript or php script that allows me to see on one side the various packages of java file and in the other whenever I select a java file to view its contents into another window by highlighting the text with different colors for different methods, variables, and key word. Good morning to all and thank you for sharing so much information to the non coding public. While browsing the javascriptkit.com site I came across a wonderful script to help me with pagination on a web page. The directions are simple to understand but one part has me lost. The files contentfader.js and jquery-1.2.2.pack.js are to be downloaded but where do I put them? Here is the page with the script: http://www.javascriptkit.com/script/...ntviewer.shtml I know everyone is busy and my question is basic but I have to start somewhere. Thanks, Hi there, I can;t figure out where to change the code/add in code I have installed Fancybox using jQuery and done all the neccessary steps to ensure it works as popup. However I can't find where to add in code/edit code to make my title left for instance or bold type etc. This is the code that calls the fancybox website is: http://www.soltoro.com/NEW/projects/elrayo.html Code: <script> $(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox({
'titlePosition': 'inside'
});
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true});
/* Apply fancybox to multiple items */
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'titlePosition' : 'inside',
'overlayShow' : false
});
});</script>
NOT SURE WHAT IS GOING ON, WHEN I COMMENT OUT THE CREATE ARRAY FUNCTION EVERYTHING SEEMS TO WORK FINE, SO WHAT IS UP WITH THE CREATEARRAY FUNCTION???? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Photoviewer</title>
</head>
<body bgcolor="#FFF1CC">
<h1><u> Viewer </u></h1>
<p>
<img id="myImage" src="InitialImage.jpg" width="444" height="293" alt="viewerImg" />
</p>
<hr />
<!--Entry boxes-->
<form action="" method="post">
<p>Photo's Folder
<input type="text" id="photofold" value="umcp/" /><br />
</p>
<p>Common Name
<input type="text" id="commonName" value="college" /><br />
</p>
<p> Start Photo Number
<input type="text" id="Startval" value="1" />
</p>
<p>End Photo Number
<input type="text" id="Endval" value="1" />
</p>
<!--Action buttons-->
<p>
<input type="button"id="displayShowButton" value="Slide Show" />
<input type="button"id="displayRandoButton" value="Random Slide Show" />
<input type="button"id="displayNextButton" value="Previous Slide" />
<input type="button"id="displayLastButton" value="Next Slide" />
</p>
<!--Reset Button-->
<p>
<input type="reset" value="Reset" />
</p>
</form>
<script type="text/javascript">
/*<![CDATA[*/
/*setting global variables*/
var photosArrayGlobal;
var photoIndexGlobal;
var displayGlobal=document.getElementById("myImage")
/* calling main */
main();
function main() {
document.getElementById("displayShowButton").onclick= setSequential;
document.getElementById("displayRandoButton").onclick=setRandom;
}
/*Generate the size of the photoarrays */
function createArray() {
window.alert("create array");
if (number > 0) {
window.alert("there are"+number+"photos in your range");
photosArrayGlobal= new Array (number);
return photoArrayGlobal;
getArrayPhotosNames();
}
Else {
window.alert("there is one photo in your range");
photosArrayGlobal = new Array (1);
return photosArrayGlobal;
getArrayPhotosNames();
}
}
/*Designate that either a random or a sequential order has been requested,sequential=1/random=0*/
function setSequential() {
var mode= 1;
window.alert("set sequential");
checkRange();
}
function setRandom () {
var mode= 0;
window.alert("set random");
checkRange ();
}
/*make sure end is start is less than end*/
function checkRange() {
window.alert("check range");
var Start= document.getElementById("Startval");
var Startnum = Start.value;
var End = document.getElementById("Endval");
var Endnum = End.value
if (Endnum < Startnum){
window.alert("Invalid Numbers");
}
else {
window.alert("correct input");
var range = Endnum - Startnum;
window.alert(range);
var number=Number(range);
createArray ();
}
}
/* This function will read the folder name, common name, start photo number, and end photo number and will return an array with the names of the photos that belong to the specified number range. Each photo's name consists of the folder name, followed by the common name, the photo's number and the ".jpg" extension*/
function getArrayPhotosNames () {
window.alert("all done for now");
}
/*]]>*/
</script>
</body>
</html>
Hello everyone, I am sorry to take up your time, I need help with some small issues, I am not familiar with java / php. I will post my problems on different threads. --- N0 1 is: I need a image gallery like this: Big image is 540px wide and beneath it is a thumbnail that activates the big image on click. I have one now but I am not satisfied with it. The link is: http://sfantipa.ro/gal_iarna.html . What I do not like is the fact that it scales the vertical images as the same weight and distorts them and I want the thumbnails to be on 1 row with before and next < > buttons or scrolled by mouse over at the left and right row, doesnt really matter which one. The thumbnail will have some space between them but they will load them as they are not scale them to predefined w/h. No text description and the thumbnails are always displayed, not hide... I am asking here because although I found many scripts, none is the one I need Can anyone help please? Thanks fokes! |
|||||||