Add lightbox?

[booyaka95]

Can someone tell me how to put
a lightbox into the script to view larger images
like on clafy.com ?

Please Help 😀

 

[gamerlv]

What kind of lightbox would you want?
The original lightbox based on prototype. I am not very familiar with this one. But maybe some else is.
Or one of the jquery based one, i know jquery and how to use it so i would recommend it.
I think this is the best one for you but you can look for one your self, i can help implement any one of the jquery ones.
http://leandrovieira.com/projects/jquery/lightbox/

 

[booyaka95]

If you know how to use jquery i choose it,
but how to use? 😀

 

[gamerlv]

If you know how to use jquery i choose it,
but how to use? 😀

ok when i started work on this i saw that prototype is already used, so since it is bad to use 2 javascript library in one file i decided to first try to use the prototype based lightbox. This failed after 10 times training i gave up on that and use jquery.

I must how ever say that it does work but it isn't the nices code there is. If anyone here knows how to use prototype lightbox it would be nice if he could explain it here.

Here is my code:

<!--Lightbox and jquery stuff -->
<link href="<?=URL_SCRIPT;?>css/lightbox.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?=PATH_SCRIPT;?>js/jquery.lightbox-0.5.pack.js"></script>
<script type="text/javascript">
jQ = jQuery.noConflict();
jQ(document).ready(function() {
        jQ('#imagen a').lightBox( {
            imageLoading: 'site-img/lightbox/lightbox-ico-loading.gif',        // (string) Path and the name of the loading icon
            imageBtnPrev:            'site-img/lightbox/lightbox-btn-prev.gif',            // (string) Path and the name of the prev button image
            imageBtnNext:            'site-img/lightbox/lightbox-btn-next.gif',            // (string) Path and the name of the next button image
            imageBtnClose:            'site-img/lightbox/lightbox-btn-close.gif',        // (string) Path and the name of the close btn
            imageBlank:                'site-img/lightbox/lightbox-blank.gif' });
  });
</script>
<!--end of jquery -->

past it right above

<script type="text/javascript">
// <![CDATA[
<? if ($spit==true) { ?>Behaviour.register(error);
<? } ?>
<? if ($modo==1 || $modo=='rr') { ?>Behaviour.register(_up);
<? } ?>
<? if ($modo==3) { ?>Behaviour.register(_proceso);
<? } ?>
<? if ($modo==2) { ?>Behaviour.register(_ver);
<? } ?>
<? if ($modo==2 || $modo==3) { ?>Behaviour.register(_social);
<? } ?>
<? if ($cut_url==true && $cut_url_user==true && $modo==1) { ?>
Behaviour.register(_pref);
<? } ?>
// ]]>
</script>

You also need this zip for it to work:
http://c.gamerlv.co.cc/jquery_lightbox_chevereto_files.zip
(if the links down contact me i can reupload it some where else.)

 

[booyaka95]

past it right above
<script type="text/javascript">
// <![CDATA[
<? if ($spit==true) { ?>Behaviour.register(error);
<? } ?>
<? if ($modo==1 || $modo=='rr') { ?>Behaviour.register(_up);
<? } ?>
<? if ($modo==3) { ?>Behaviour.register(_proceso);
<? } ?>
<? if ($modo==2) { ?>Behaviour.register(_ver);
<? } ?>
<? if ($modo==2 || $modo==3) { ?>Behaviour.register(_social);
<? } ?>
<? if ($cut_url==true && $cut_url_user==true && $modo==1) { ?>
Behaviour.register(_pref);
<? } ?>
// ]]>
</script>

What i need to do with this?

 

[gamerlv]

Nothing at all, just find it and past my code above it.

 

[clafy]

Follow the steps in http://www.huddletogether.com/projects/lightbox2/.

 

[gamerlv]

Hmm replay seems broke with me, odd :/

@clafy
That is what i used to make that litle bit of code above, just made it so it looks nice with all folder structure and such.
But one important note on this. Jquery and Prototype don't play along nice in one script, so if you use it in any way use it the way i showed, that is with this bit of code before any use of jquery :

jQ = jQuery.noConflict();

This will make it so that jquery use jQ as it's identifier and not $. This is needed because $ already in use by prototype.

--Gamerlv

 

[booyaka95]

@gamerlv

i paste the code
and uploaded the files from the .zip
but it did not work 🙁

 

[ImageScraps]

plz reup the file

 

[gamerlv]

I don't think I ever uploaded any files for this.
I may just remake this when the Jquery version becomes more used.

 

[ImageScraps]

http://c.gamerlv.co.cc/jquery_lightbox_chevereto_files.zip

its not working

 

[gamerlv]

ow that one.
What's wrong? I can download it fine. Or does the code not work right?

Do note that this is a jquery lightbox. There for it needs Jquery to work right, now if you have the jquery version it should work right. (But this does need a small modification)

 

[ImageScraps]

i want to show random images on my site footer in the home page what should i do, plz tell me