PDA

View Full Version : Resolved Lightbox image viewer 2.03a



rexi
04-15-2011, 12:54 AM
1) Script Title:

Lightbox image viewer 2.03a



2) Script URL (on DD):

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm



3) Describe problem:

Not working.
This page example is :rexi1 (http://rexi1.blogger.ba/)

jscheuer1
04-15-2011, 05:08 AM
The script requires a DOCTYPE that invokes standards mode. However, that's just for certain niceties in the presentation. The basic problem on the page you linked to is that all of these:


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


are 404 Not Found. Did you download the Lightbox V2.03a archive:

http://www.dynamicdrive.com/dynamicindex4/lightbox2/lightbox2.03a.zip

and use its files and folder structure as a template? These files are required.

However, there are other more advanced versions of this script (I see v2.05 with IE 9 support is now out):

http://www.huddletogether.com/projects/lightbox2/

and other lightbox type scripts. So you might want to consider alternatives. See:

http://www.google.com/search?hl=en&client=opera&hs=jkw&rls=en&channel=suggest&q=lightbox+clones&btnG=Search&aq=f&aqi=g1g-m1&aql=&oq=

for Google search results on 'lightbox clones'.

rexi
04-15-2011, 05:36 AM
Wow,..thank you very much.It is not for me hahahaha.This is very complicated for me.
Have good time .....

rexi
04-15-2011, 07:57 PM
1) Script Title:

Lightbox image viewer 2.03a

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

3) Describe problem:

When I download "lightbox.js",...and I copy this part of script,..and put on my HTML ,..which I need put around this script:"<style type="text/css">" ..or.."<script type="text/javascript">".

Tankx.

jscheuer1
04-16-2011, 01:55 AM
<script type="text/javascript">
//script code goes here
</script>

But it's a little more complicated than that. You would still need the prototype.js, scriptaculous.js loading effects.js. These could be loaded from Google. And you would need the lightbox.css file (this could be put on the page) as well as the resource images, at minimum the close image. If using the group feature you would also need the next and previous image 'buttons'. The loading image would be nice too.

Here's it setup like I said:

3852

Just unzip all the files to a folder and view the google_api.htm in the browser. As the external scripts are online, you must be connected to the internet for it to work.

Demo:

http://home.comcast.net/~jscheuer1/side/lb_google/google_api.htm

rexi
04-16-2011, 04:04 AM
Thank you for time.
Still not working.Iwill try ask you for more time for me.

I will ask you for four (4) steps wich is right or wrong.

1 So I save "lightbox.js file".


2 I put this on the my page:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />



3 Also I put "lightbox.css file" in my page which looking like that :


<script type="text/javascript">

#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

#lightbox a img{ border: none; }

#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}

#imageContainer{
padding: 10px;
}

#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%
}

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}
</script>


4 And I put this on the page:

<a href="http://www.dynamicdrive.com/dynamicindex4/lightbox2/sushi3.jpg" rel="lightbox" title="my caption">image #1</a>


IT is OK. or no ??

jscheuer1
04-16-2011, 04:11 AM
Unzip the google_api.zip file from my last post to an empty folder and then view the google_api.htm in the browser.

You may look at its source code in your editor.

rexi
04-16-2011, 04:40 AM
OK...So those my 4 steps is wrong ??

jscheuer1
04-16-2011, 04:57 AM
Yes. Have you unzipped the file? You could also look at the demo:

http://home.comcast.net/~jscheuer1/side/lb_google/google_api.htm

and use your browser's 'view source' to see its code. It's exactly the same as what's in the .zip file. You should then be able to easily see what needs to be done.

The only difference is that the .zip file also contains the images. Everything else is either right on the page or linked to from the Google API library.

If you want more help, put up a demo of your own, your best effort, and give us a link to it.

rexi
04-16-2011, 04:27 PM
Thank you,..I am shame ask you more.I can't show you link on my page ,but same problem,..it is just open new window when I click on picture.

Usually when I looking HTML from"wiew source" on some people who has "Lightbox image viewer 2.03a"..there is not many scripts.There is just like this:


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


and source for picture like this:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

For me just not working,..I spend many hours,..but no efect.I can't find key for that,..because any other scripts is not solution.
Sory for my english language,..and thank you for your help.

jscheuer1
04-16-2011, 05:11 PM
Well, that's just wrong unless those files are in the folders indicated. Either view the source code of the demo I made for you or better yet, download the archive of it as I've been saying.

Do you know how to open a .zip archive? What OS are you using? What browser?

rexi
04-16-2011, 06:04 PM
I using XP,..browser IE9.
So If I save file on the EditPad lite,..this is mean that is not inaf,..I need put file in some folder ???

jscheuer1
04-16-2011, 10:08 PM
Download my archive:

3853

Unzip it into a separate folder. View its google_api.htm in your browser. Look at its google_api.htm file's source code in EditPad Lite. That should clear things up.

rexi
04-17-2011, 01:21 AM
Now it is working on this page (http://rexi.blogger.ba/)
But there is huge code on my HTML,..if I put few more scripts will be block and hapaned me that I loosing some text HTML.Just sistem cut some text on the end HTML.
I sow that people who using same "Lightbox image viewer 2.03a " have not huge code on the HTML.
What is diffrent and where is this huge code??
I am realy very thank you for your time.

jscheuer1
04-17-2011, 12:11 PM
I thought you're the one who asked about putting the script on the page. I may have misunderstood that. If you put the lightbox.js script in the the same folder as the page (unlike prototype, scriptaculous, and effects, it cannot be referenced from a third party host like Google), you may reference it externally as:


<script type="text/javascript" src="lightbox.js"></script>

instead of as:


<script type="text/javascript">
// -----------------------------------------------------------------------------------
//
// Lightbox v2.03
// by Lokesh Dhakar - http://www.huddletogether.com
// 4/9/06
//
// For more information on this script, visit:
// http://huddletogether.com/projects/lightbox2/
//
// Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
//
// Credit also due to those who have helped, inspired, and made their code available to the public.
// Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others.
//
// Lightbox v2.03a
// by Dynamicdrive.com- http://www.dynamicdrive.com
// Nov 29th, 2007
// Added ability for the caption ("title" attr of link) to be optionally hyperlinked, by throwing in a "rev" attr containing the desired link
// -----------------------------------------------------------------------------------
/*

Table of Contents
-----------------
Configuration
Global Variables

Extending Built-in O . . .

[MOST OF THE CODE REMOVED FOR BREVITY]

. . . mberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Help from Ran Bar-On [ran2103@gmail.com]
//

function pause(ms){
var date = new Date();
curDate = null;
do{var curDate = new Date();}
while( curDate - date < ms);
}
/*
function pause(numberMillis) {
var curently = new Date().getTime() + sender;
while (new Date().getTime();
}
*/
// ---------------------------------------------------



function initLightbox() { myLightbox = new Lightbox(); }
Event.observe(window, 'load', initLightbox, false);
</script>

Also, I notice that the helper images (included in the archive I made for you) are missing from the folder. Without them you will not see the loading image or close image. If using the group option, you will not see the next or previous image 'buttons'.

If you do make the script external, make sure that the configuration part still points to these images (from the lightbox.js script):


// -----------------------------------------------------------------------------------

//
// Configuration
//
var fileLoadingImage = "loading.gif";
var fileBottomNavCloseImage = "closelabel.gif";

var animate = true; // toggles resizing animations
var resizeSpeed = 7; // controls the speed of the image resizing animations (1=slowest and 10=fastest)

var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable

// -----------------------------------------------------------------------------------

And (if using the optional grouped images) here in the styles:


#prevLink:hover, #prevLink:visited:hover { background: url(prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(nextlabel.gif) right 15% no-repeat; }

rexi
04-17-2011, 03:05 PM
Thank You John.