Module: ColorBox integration - 2.0

Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Fri, 2011-05-27 01:53

Adds Colorbox integration for Gallery 3.
After installation, fine-tune the startup settings by visiting module's admin page

  • Target (jQuery filter)
  • Overlay Opacity (default: 0.8)
  • Transition (default: Elastic)
  • Enable Slideshow (Default: off)
  • Auto start Slideshow (Default: on)
  • Slideshow Speed (default: 2500)
  • Close on Overlay Click (Default: on)
  • Close with Esc (Default: on)
  • Cyclic Navigation (Default: on)

By default module comes with color schema #5, you can download and replace CSS folder from author's web-site

---
Problems? Report it here | Get latest version | Coffee Fund | My Library | Blog

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Fri, 2011-05-27 02:59

Looks cool. I hope that the slideshow has some admin time settings.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Fri, 2011-05-27 04:12

Does look cool. I wonder if "stop slideshow" should be "pause slideshow".

U-G

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Fri, 2011-05-27 04:40

wording is default
there is an option to adjust these. I can add it as an option - http://colorpowered.com/colorbox/

I have added to topic description above settings supported right now

 
Riccardo80

Joined: 2011-04-08
Posts: 13
Posted: Fri, 2011-05-27 14:19

How to install it??

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Fri, 2011-05-27 16:59

Published from link above
instructions included
please post comments/bugs

 
tenneck

Joined: 2011-03-10
Posts: 56
Posted: Sat, 2011-05-28 13:45

I am sorry, but I have no idea, how to install it; I haven't found the instructions ??
Could you help me please? :)

Thanks

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Sat, 2011-05-28 15:58
 
Maerin

Joined: 2010-01-27
Posts: 29
Posted: Sat, 2011-05-28 18:38

I followed your installation/configuration description but my G3.0.2 errorlog shows:
error: Can't find script file: colorbox-init.js

What do I wrong ?

 
tenneck

Joined: 2011-03-10
Posts: 56
Posted: Sun, 2011-05-29 15:30

Thanks but the picture is loading and loading and loading.. but it doesn't show the picture :(

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Sun, 2011-05-29 17:48
Maerin wrote:
I followed your installation/configuration description but my G3.0.2 errorlog shows:
error: Can't find script file: colorbox-init.js

What do I wrong ?

as it is said in the installation instruction, you need to save settings at least once

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Sun, 2011-05-29 18:06
tenneck wrote:
Thanks but the picture is loading and loading and loading.. but it doesn't show the picture :(

what theme do you use?
is settings saved at least once?
check "common problems" section under http://colorpowered.com/colorbox/

 
Maerin

Joined: 2010-01-27
Posts: 29
Posted: Sun, 2011-05-29 20:41
Quote:
as it is said in the installation instruction, you need to save settings at least once

Well I did save (multiple times) of course and get even a normal reply "Settings have been Saved".
I'm using the standard Wind theme. After the upgrade form 3.0.1 to 3.0.2 this is the first Module I installed.

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Mon, 2011-05-30 03:21

since you are using wind theme, there is a source hack procedure required to override default Wind theme functionality
it is explained at codex page above
as far as JS - please check colobox/js folder and see if colorbox-init.js is there

 
Maerin

Joined: 2010-01-27
Posts: 29
Posted: Mon, 2011-05-30 08:34

Thanks for your replys.
I did the Wind theme hack as described on the codex page.
I downloaded colorbox from the codex page and installed it.
In modules/colorbox/js are two files "jquery.colorbox.js" and "jquery.colorbox-min.js" (so no colorbox-init.js)

 
bobertuk

Joined: 2011-02-07
Posts: 12
Posted: Mon, 2011-05-30 13:55
Maerin wrote:
Thanks for your replys.
I did the Wind theme hack as described on the codex page.
I downloaded colorbox from the codex page and installed it.
In modules/colorbox/js are two files "jquery.colorbox.js" and "jquery.colorbox-min.js" (so no colorbox-init.js)

I'm using GreyDragon 3.06 so haven't had to do the hack - but ColorBox seems to be be doing nothing! Don't have colorbox-init.js in /colorbox/js either :(

Bob

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Mon, 2011-05-30 18:51

if you use GD, then you do not need to change theme's html code
if file is not there, it means it is not saved
if there is a problem saving file (rights, url, etc.) error would be logged in the var\logs

 
bobertuk

Joined: 2011-02-07
Posts: 12
Posted: Mon, 2011-05-30 19:20
Serge D wrote:
if you use GD, then you do not need to change theme's html code
if file is not there, it means it is not saved
if there is a problem saving file (rights, url, etc.) error would be logged in the var\logs

I've tried with GD & ImageMagick and have the same problem in both cases. After successfully 'Saving' colorbox settings then looking in /var/logs I get the error...

2011-05-31 03:02:34 +08:00 --- error: Can't find script file: colorbox-init.js

Bob

EDIT: just changed permissions (recursive) on /colorbox to 777 and 'colorbox-init.js' created after another save :)

Bob

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Tue, 2011-05-31 02:23

There's a few things I like about this module compared to shadowbox and one deal-breaker. I like the border. I like that you can configure it via admin. I like the fact that the overlay opacity is greater, so that it stands out more from the resize page behind it. The deal-breaker is the size of the fonts and icons. I'm in the process of downsizing my full-size images, and for images in portrait orientation there isn't enough room for "image 1 of 99 This is the Title". Works ok for larger image sizes, although even so I wonder if the word "image" is really needed.

What I'm doing is sticking with shadowbox for the time being, but I'm adding a "overlayOpacity: 0.9" parameter to Greydragon's ui.support.js - I wonder if you'd consider making this the default in a future release.

Thanks for all your efforts in porting these viewer applications.

U-G

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Tue, 2011-05-31 04:19
undagiga wrote:
There's a few things I like about this module compared to shadowbox and one deal-breaker. I like the border. I like that you can configure it via admin. I like the fact that the overlay opacity is greater, so that it stands out more from the resize page behind it. The deal-breaker is the size of the fonts and icons. I'm in the process of downsizing my full-size images, and for images in portrait orientation there isn't enough room for "image 1 of 99 This is the Title". Works ok for larger image sizes, although even so I wonder if the word "image" is really needed.

What I'm doing is sticking with shadowbox for the time being, but I'm adding a "overlayOpacity: 0.9" parameter to Greydragon's ui.support.js - I wonder if you'd consider making this the default in a future release.

Thanks for all your efforts in porting these viewer applications.

U-G

i do not change anything from default
there are 5 different themes available for Colorbox from author's web-site, you can try and see if some suite you better
then it is simply matter of replacing CSS folder
you can go further and add specific rule to custom.css to finetune fonts to your liking

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Tue, 2011-05-31 04:54

After I posted those comments I went to the colorbox site and revisited the various config and style options. Their demos have smaller fonts, so I wonder why the default settings are larger. It's great that you can style it with CSS - that's another plus.

But with a narrow full-size image the problem seems to me that the image title and all the navigation and slideshow controls are on the one level - top or bottom. Shadowbox splits them. It's possible that you may be able to split them in colorbox using CSS, but it wouldn't be easy. For typically larger full-size images and modest title lengths (i.e. most instances) it's not a problem.

 
coastertalk_de

Joined: 2011-06-04
Posts: 1
Posted: Sat, 2011-06-04 06:02

I installed this module and after setting CHMOD of the colorbox/js-Folder to 777 it works real fine. Except one point.

My pictures aren´t grouped at all, so there are no "previous" and "next" links to them and of course no slideshow.

I´m using Gallery 3.0.2 with a modified greydragon_w theme.

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Sat, 2011-06-04 18:27

GDW does not support slideshow mode as it is replica of Wind theme with minor changes
you can use GD or introduce similar changes into GDW/Wind

 
wearwolfie

Joined: 2010-07-23
Posts: 6
Posted: Mon, 2012-01-09 23:02

Hi,
I have installed colorbox and initialised it per the straightforward instructions here. The individual photos now open using the colorbox functionality as intended, but the slideshow functionality of colorbox doesnt appear at all. I have disabled the cooliris slideshow module, and am using the default wind theme.
Any thoughts or help greatly appreciated... I have read around the forums but cant seem to locate a solution to this - I have chmod 0777 my colorbox js folder and files - any changes I make on the admin options for colorbox (eg opacity) do take effect no problem but the slideshow enable option doesnt appear to have any affect.
Otherwise, this is a great module and could be just the funcitonality i am after if i can get it going properly!
Many thanks in anticipation.

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Tue, 2012-01-10 03:35
wearwolfie wrote:
Hi,
I have installed colorbox and initialised it per the straightforward instructions here. The individual photos now open using the colorbox functionality as intended, but the slideshow functionality of colorbox doesnt appear at all. I have disabled the cooliris slideshow module, and am using the default wind theme.
Any thoughts or help greatly appreciated... I have read around the forums but cant seem to locate a solution to this - I have chmod 0777 my colorbox js folder and files - any changes I make on the admin options for colorbox (eg opacity) do take effect no problem but the slideshow enable option doesnt appear to have any affect.
Otherwise, this is a great module and could be just the funcitonality i am after if i can get it going properly!
Many thanks in anticipation.

Wind theme does not support slideshow mode as there is no information about other images.
You can try GD theme and see if would work better for you

 
inchains

Joined: 2012-04-19
Posts: 18
Posted: Tue, 2012-05-22 09:50

Hi!

I've read all the comments so far, and did all the chmod and commented the code, did the save settings once but every time I comment the line
<?= $theme->script("gallery.show_full_size.js") ?>

my page crashes with a
HTTP Error 500 (Internal Server Error): An unexpected condition was encountered while the server was attempting to fulfill the request.

In my var/log file the only error that is reported (with code commented or not) is
2012-05-22 19:23:03 +10:00 --- error: Can't find script file: google_language.js

Thanks.

________________________________
API:
- Gallery 3.0.3
Server:
- Apache 2.2.22
- PHP 5.2.17
- MySQL 5.1.61-community-log
- OS linux x86_64

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Tue, 2012-05-22 19:40
inchains wrote:
I've read all the comments so far, and did all the chmod and commented the code, did the save settings once but every time I comment the line
<?= $theme->script("gallery.show_full_size.js") ?>

my page crashes with a
HTTP Error 500 (Internal Server Error): An unexpected condition was encountered while the server was attempting to fulfill the request.

In my var/log file the only error that is reported (with code commented or not) is
2012-05-22 19:23:03 +10:00 --- error: Can't find script file: google_language.js

I have no idea where google_language.js is referenced from

I assume this change was done as well

Quote:
in photo.html.php comment out lines $(".g-fullsize-link").click(function() { $.gallery_show_full_size(<?= html::js_string($theme->item()->file_url()) ?>, full_dims[0], full_dims[1]); return false; });

Serge
_____________________________________________
Photo Gallery | GreyDragon Theme | Follow on Twitter

 
inchains

Joined: 2012-04-19
Posts: 18
Posted: Tue, 2012-05-22 21:51

Yes, I commented the respective code in both files, but is with the <?= $theme->script("gallery.show_full_size.js") ?> commented that the page triggers the http error 500.
If I leave photo.html.php comment and remove the one from page.html.php the error's gone, that's why assume it's something to do with <?= $theme->script("gallery.show_full_size.js") ?>

I've disabled all modules and the log error --- error: Can't find script file: google_language.js still shows, but I guess that comes from G3 itself.

So, any idea why commenting <?= $theme->script("gallery.show_full_size.js") ?> gives the 500 error?

Thanks.


________________________________
API:
- Gallery 3.0.3
Server:
- Apache 2.2.22
- PHP 5.2.17
- MySQL 5.1.61-community-log
- OS linux x86_64

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Wed, 2012-05-23 00:55

What if you remove the line?
Perhaps it is the way you are commenting it out.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
inchains

Joined: 2012-04-19
Posts: 18
Posted: Wed, 2012-05-23 08:39

Fixed... lol

Thanks.

________________________________
API:
- Gallery 3.0.3
Server:
- Apache 2.2.22
- PHP 5.2.17
- MySQL 5.1.61-community-log
- OS linux x86_64

 
atzounis

Joined: 2007-06-25
Posts: 9
Posted: Sun, 2012-10-28 12:33

Hello,
Doesn't seem to work on my site.
i followed these steps:
in page.html.php comment out line <?= $theme->script("gallery.show_full_size.js") ?>
in photo.html.php comment out lines $(".g-fullsize-link").click(function() { $.gallery_show_full_size(<?= html::js_string($theme->item()->file_url()) ?>, full_dims[0], full_dims[1]); return false; });
in colorbox module configuration, specify .g-fullsize-link as a target
+CHMOD the /colorbox folder to 777
but the pics still open in new page as before.
I needed them to open in a lightbox for larger view so that user does not have to press back in order to find the exact page of the album he was.
Any ideas?
Thank you all for your time :D

 
CherylJoyW

Joined: 2012-08-19
Posts: 42
Posted: Sun, 2013-03-24 23:41

I have the slide show running BUT it does not display the images in the order of the album Is there a way to define the order of the images in the slideshow?

thanks
Cheryl

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Thu, 2013-08-22 01:38

I have switched to using Colorbox on my site, because it will execute before the page is loaded, whereas Shadowbox requires that you wait. However I have a problem in that Colorbox doesn't trap keyboard navigation. For sure, if I press the right arrow on the keyboard Colourbox moves to the next image, but behind it, the underlying page also responds to the keyboard signal and in a second or so advances to the next resize page and Colorbox closes. Shadowbox does not behave like that - it traps keyboard navigation.

Now there is a new version of Colorbox available that claims it has this feature. I replaced the two javascript files in the module with the updated ones and the module still seems to work, that is, Colorbox runs. But it still doesn't trap keyboard navigation, like it is supposed to. I have tried hacking the code, but with no success.

Serge - if you're reading this, would you be interested in updating the Colorbox module to the latest version and seeing if trapping the keyboard could be made to work?

U-G

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Tue, 2014-03-11 10:24

Serge - if you're still around the forum at the moment, any chance that you could look at my question above and perhaps update the Colorbox module for the latest version of Colorbox? Or provide a few tips on how to do it?

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Sun, 2014-03-16 02:47

Posted version 2.0
Please note that it requires GreyDragon Shared Module to activate (link in description)

Serge
_____________________________________________
Photo Gallery | GreyDragon Theme | Follow on Twitter

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Sun, 2014-03-16 11:21

Thank you, thank you, thank you.

I have a question. Something I'd like to be able to do is to use the keyboard navigation arrows for navigating forwards and backwards in Colorbox. But the underlying resize page behind it responds to the keystrokes, which closes Colorbox. I thought I read on the Colorbox site that a recent version enable it to trap keystrokes. Is this true and if so is there a way to enable it?

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Mon, 2014-03-17 02:34

You need to disable thumb navigation module for it to work

Serge
_____________________________________________
Photo Gallery | GreyDragon Theme | Follow on Twitter

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Mon, 2014-03-17 11:00
Serge D wrote:
You need to disable thumb navigation module for it to work

But this wasn't the case for Shadowbox. With Shadowbox I could have keyboard navigation enabled for the resize pages using that module, and when the Shadowbox viewer opened it grabbed the keyboard, and the resize page behind it would not respond to the keystrokes. But I switched to Colorbox because Shadowbox had the problem that it would not work before the whole page loaded. Now with Colorbox, I have the problem that the Colorbox viewer is not trapping the keystrokes, and the resize page behind the viewer responds and closes the viewer.

According to the Colourbox site http://www.jacklmoore.com/colorbox/ there is an option that would solve this:

Quote:
TrapFocus - true - If true, keyboard focus will be limited to Colorbox's navigation and content.

But I wasn't able to get it to work, and was hoping that you might.

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Wed, 2014-03-19 22:03
undagiga wrote:
But this wasn't the case for Shadowbox. With Shadowbox I could have keyboard navigation enabled for the resize pages using that module, and when the Shadowbox viewer opened it grabbed the keyboard, and the resize page behind it would not respond to the keystrokes. But I switched to Colorbox because Shadowbox had the problem that it would not work before the whole page loaded. Now with Colorbox, I have the problem that the Colorbox viewer is not trapping the keystrokes, and the resize page behind the viewer responds and closes the viewer.
...

Correction, it works fine with GD 4.0 with and without photo page. Are you using it with some other theme?

If it is with some other theme, then, yes, I would have to modify module to provide access to this option

Serge
_____________________________________________
Photo Gallery | GreyDragon Theme | Follow on Twitter

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Wed, 2014-03-19 23:48

I will need to do some further testing then. Yes, I am using GD 4. GD 4 is still in beta I thought and I am using what I thought was the latest beta, which I call beta 2. However I am also using Tag Albums, and as you may recall there are a few hacks required to get this theme and module to work together. Not as many hacks as there used to be after you kindly incorporated some of rWatcher's code into GD4, but some hacks (alternative view pages) are still needed all the same. Further, while you where busy elsewhere I had some issues with navigation in the GD 4 beta that rWatcher kindly helped me sort out. I think these are documented in the Tag Albums thread, but some aspects of it may be in PMs between me and him.

Short version: I'll report back and perhaps PM you my test site.

 
fneumeier

Joined: 2010-12-30
Posts: 3
Posted: Fri, 2014-04-04 09:52

I'm looking for a way to have a Colorbox slideshow directly from the thumbnail album, i.e. skip the step of clicking in the thumbnail, being forwarded to the single picture page and them having to click the image again to see the slideshow of all pictures in that album.

Does anyone have an idea how to do this?

(Just to explain the background of my question: I'm optimizing my pictures offline anyway and upload them 800x600, so there is no need for a step inbetween showing resized images, as my "full size" images are identical to the resized intermediate size images.)

Thanks a lot in advance!

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Fri, 2014-04-04 22:55
fneumeier wrote:
I'm looking for a way to have a Colorbox slideshow directly from the thumbnail album, i.e. skip the step of clicking in the thumbnail,

The greydragon theme has an option to disable the photo page and go directly to Colorbox. I'm not aware of this being an option in other themes. I imagine that it would involve an extensive hack of a theme to add it.

 
fneumeier

Joined: 2010-12-30
Posts: 3
Posted: Sat, 2014-04-05 14:47

Thanks a lot! I'll check how they do it in that theme to hopefully find a way to adjust my own theme with that ...