|
JavaScript - Js Backbox Image Viewer
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 Similar TutorialsHello, 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. 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 Hello everyone So I'm new and I have searched but I still got two questions. I'm gonna use the backbox scrip on my site and of course I got it from javascriptkit.com but - I would like to close the image not only by clicking outside of box or at the Close-button - but also by clicking the image itself. The orignal script works really well - except for one small thing - when the backbox displays large images - I can't close them by clicking outside the image on the left and right sides - it only works closing when I click above or under the box. Anyway; internet gave me this small code: Code: objLightbox.onclick = function(e) { // close Lightbox is user clicks shadow overlay
if (!e) var e = window.event;
var clickObj = Event.element(e).id;
if ( !/(prevLink)|(nextLink)/.test(clickObj) ) {
myLightbox.end();
}
};
And I was wondering if you guys know where to put it in the lightbox.jg file for it to work (or if it even will work at all?) - Or maybe I can change the original code for this to happen (Without adding this new code?) Me then - I have notepad + + and I just recently learned CSS - Java is a tad more complicated when I look at the code The last question I have is if you guys got any good site for me to read and learn Java? Like I need to understand the logic behind it - how it thinks. I just learned how CSS "thinks and acts" a few months ago - but I guess Java isn't anything like that. Regards Fredrik 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. 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 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 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. 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 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 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.
I have nearly successfully implemented a gallery using Backbox: http://www.javascriptkit.com/script/...ox/index.shtml However, when I test it in IE (7 & 8), it looks like it's invoking the javascripts and loading the large image from the thumbnail link, but then it just hangs up on the loading waiting to get the image. Does anyone know how to fix this? Thanks. Hi i am designing a site for my cross country team, it can be seen here.. http://craterxc.angelfire.com/ If you click the photos link you will see one image on the page.. when you click it it is supposed to open the backbox image viewer which i got from.. http://javascriptkit.com/script/script2/backbox/ If you are using IE you will notice instead of opening the image viewer it opens a new page with a larger version of the original picture. All other browsers work correctly and open the backbox image viewer.. Please help me figure out why this does not work in IE as i've searched for an answer for a few days now and have had no luck! Thanks 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 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, |
|||||||