|
JavaScript - Screenshot Viewer.
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>
Similar TutorialsI have a site that we are finishing up. The site is an interactive stair designer. All of the stair parts are pulled dynamicly and uses background images and images to create the final stair system display. The client wants to beable to print the page, but due to background images it prints differently on every browser and not at all in some. I have seen screenshot to pdf applications before, but can't seem to find anything now. Is it possible to create a screenshot and generate a pdf of that page with the image backgrounds? I am looking for code to do it automaticly and not a third party program like Adobe or nitropdf. What are my options? Hi there, I'll try to be brief: When a user submits a website in the input field on my site, I'd like there to be a background process that takes a screenshot of that website and then displays that image to the user. This website does it perfectly. The user writes the website to the right, and the screenshot is displayed to the left. I'm looking for a free alternative, and read that perhaps webkit(s) might be the solution? I'm a total newbie when it comes to this so any feedback is gold to me. Thank you so much guys/gals. Hello, I followed a Mega Drop Down menu tutorial and everything is working great, except for some reason on certain pages - when the menu drops down, some table elements behind the menu actually appear in front of it? I'm not quite sure what or why this is happening. Here is the URL for reference. http://gem-tech.com.mytempweb.com/store/pc/home.asp Here is an example of what I am talking about: Here is how it should look: Any help would be appreciated, thanks! Hello, 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 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 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, 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 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 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! 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. 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 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'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. 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] 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, 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.
|
|||||||