Lightbox JS and Lightbox Plus in Coppermine

[Sylvaticus]

Is it possible to do something like this in Coppermine? Would it be hard to do?

http://www.cssplay.co.uk/menu/lightbox.html
http://serennz.cool.ne.jp/sb/sp/lightbox/
http://www.huddletogether.com/projects/lightbox/

[Joachim Müller]

nice alternative for displaying full-size pics. Currently not an option. May be considered for the future. Should be possible to apply as a hack as well. The script you refer to is being released under Creative Commons Attribution 2.5 License, so I'm not sure it could be added to the core easily, as Coppermine is being released under GNU GPL.

[radianation]

I'm working on a hack for this. Stay tuned.

[thedan]

I performed this hack (using Lightbox Plus) on one of my galleries some time ago and generally prefer it over the default image loader.

It is unfortunate that the licenses are incompatible and it cannot be included in the core. I absolutely love coppermine, but the full-sized image loader happens to be one of my pet peeves, and this hack allowed me to get around it nicely.

Read the attachment for the details. It has been a while since I first did it, but I just tested it on another gallery of mine which was recently patched to cpg1.4.9 - so it should work fine.

Edit: I have also been meaning to use a modified Hoverbox for the thumbnails, but haven't got around to that as yet.

[Joachim Müller]

Pasting your instructions into this posting:

=== Lightbox Plus CPG 1.4.9 hack ===
by Daniel Carter (dan at ids dot org dot au)

[OPEN include/themes.inc.php]

[FIND]

Code Select Expand

$pic_html = "<a href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&amp;fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=no,status=no,resizable=yes,width=$winsizeX,height=$winsizeY')\">";

[REPLACE WITH]

Code Select Expand

// MOD by dan: use lightbox to display full-sized images
            #$pic_html = "<a href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&amp;fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=no,status=no,resizable=yes,width=$winsizeX,height=$winsizeY')\">";
            $pic_fullsize_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
// NOTE: you may like to customise the title attribute in the anchor tag, below.
            $pic_html = "<a href=\"" . $pic_fullsize_url . "\" rel=\"lightbox\" title=\"Photography\">";
// end MOD

[OPEN themes/classic/template.html]

[FIND]

Code Select Expand

<link rel="stylesheet" href="themes/classic/style.css" type="text/css" />

[AFTER, ADD]

Code Select Expand

<link rel="stylesheet" href="scripts/lightbox/lightbox.css" type="text/css" />
<script type="text/javascript" src="scripts/lightbox/lightbox_plus.js"></script>

[VISIT http://serennz.cool.ne.jp/sb/sp/lightbox/#download]

1. Download all files into scripts/lightbox/ in your coppermine installation directory. You can put them elsewhere, but make sure you adjust the modifications to themes.inc.php as appropriate, above.

2. Edit lightbox_plus.js, then under the "=== main ===" heading, adjust all the paths as appropriate.

For example, if you have coppermine installed in http://domain.name/photos/ and you installed lightbox as suggested, all the paths would begin with '/photos/scripts/lightbox/'

3. Done. Now test your new configuration :-)

Not sure though about

You can put them elsewhere, but make sure you adjust the modifications to themes.inc.php as appropriate, above.

- that file should not be edited imo.

Moving this thread from "Feature requests" to mods. Thanks for your contribution.

[Stramm]

There's already a mod that adds the Lightbox feature. Here's the link http://forum.coppermine-gallery.net/index.php?topic=35539.0

[thedan]

Not sure though about - that file should not be edited imo.

I did say it was a hack

Gizmo's slightly longer method for Lightbox JS (which I have not used myself) is probably better in that it only involves modifications to theme.php.

[Garibaldi]

Pasting your instructions into this posting:Not sure though about - that file should not be edited imo.

Moving this thread from "Feature requests" to mods. Thanks for your contribution.

I would like to point out that you also must have this in your template.html header:

Code Select Expand


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

That is a dependant script that the lightbox author uses

[thedan]

Garibaldi, can you clarify whether you are using Lightbox, Lightbox JS or Lightbox Plus?

[Garibaldi]

I am using Lightbox Plus, which you can download here:
http://serennz.sakura.ne.jp/toybox/lightbox/?en#download

I was referring to GauGau's post here

[testomat]

Hello,
i got a question. theDan wrote that he implemented a hoverbox at his site http://www.sandybayharriers.org.au/gallery/
Does anybody knows how i get this feature implemented to my cpg 1.4 ?
Or has anybody an idea, where i can get this mod ?

[Joachim Müller]

Told you so already on the similar thread on the German support board: you find this mod within this very thread.

[testomat]

In the Lightbox hack there is an animation, that slows a little bit. Is it possible to remove it, so that only the background gets dark and the picture shows up, without any animation ?
Which part of code, i have to remove ?

[efekt]

Told you so already on the similar thread on the German support board: you find this mod within this very thread.

as far as I know German there is no solution in that topic, so here goes my post...

My gallery: http://hmr6dobl2ii0.az.pl/shop/
Theme: chaoticsoul (modified a bit)

I have tried to add Hoverbox (from here http://sonspring.com/journal/hoverbox-image-gallery) to my gallery like this:

ADD in style.css

Code Select Expand

/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
cursor: default;
list-style: none;
}

.hoverbox a
{
cursor: default;
}

.hoverbox a .preview
{
display: none;
}

.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}

.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}

.hoverbox li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}

.hoverbox .preview
{
border-color: #000;
width: 200px;
height: 150px;
}

CHANGE in theme.php

Code Select Expand

<!-- BEGIN thumb_cell -->
                <td valign="top" align="center"><ul class="hoverbox">
<li>
                                        <a href="{LINK_TGT}#my_anchor">{THUMB}</a>
</li>
</ul>
                                        {CAPTION}
                                        {ADMIN_MENU}

                </td>

CHANGE in function.inc.php (2times)

Code Select Expand

$thumb_list[$i]['image'] = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\"/><img src=\"" . $pic_url . "\" class=\"preview\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\"/>";


It should work, however it doesn't... anybody sees any mistake there?? or could give me some advice?? any help, ideas much appreciated...

[efekt]

*bump*