Jump to content


Wish granted: Implement LightBox

Started by Dean, Aug 21 2006 08:45 AM

21 replies to this topic

#1 Dean

    Loves Etomite Forums!

  • Admin
  • 4,746 posts
  • Gender:Male

Posted 21 August 2006 - 08:45 AM

I think that this would be the ultimate display method for etoGal.

I know that this has been covered elsewhere before, but I just wanted to make my mark on this part of the forum :P

#2 mikef

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,551 posts

Posted 21 August 2006 - 09:04 AM

View PostDean, on Aug 21 2006, 09:45 AM, said:

I think that this would be the ultimate display method for etoGal.

I know that this has been covered elsewhere before, but I just wanted to make my mark on this part of the forum :P
I've looked at this before. When their demo page actually works properly on my setup I'll consider it. Having a grey line through the middle of an image, sometimes blinking, sometimes not, isn't my idea of the ultimate display method!


added: I may look at doing this with Thickbox instead, sometime in the future. It is also more obvious for the site visitor how to use it. There is still a potential issue with WAI compliance (and the UK's Disability Discrimination Act), and how it operates if javascript is not enabled.

Edited by mikef, 21 August 2006 - 10:10 AM.

#3 mikef

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,551 posts

Posted 21 August 2006 - 10:30 AM

Actually, looking at the democode for ThickBox, it may be possible to use Thickbox just by ensuring all the necessary CSS and Javascript is loaded in the page template, and writing an appropriate style for EtoGalThumb.

If you do, please post the style definitions used!

#4 lloyd_borrett

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 605 posts
  • Gender:Male

Posted 21 August 2006 - 11:46 AM

G'day,

I've used Lightbox on a few sites now. It works great.

I have but two issues with it though.

First is a usability issue. Some users never catch on that you can get 'previous' and 'next' to come up and scroll through the images. So they only see the first one.

Second. It doesn't validate. If that is a concern to you then know it before you begin.

Best Regards, Lloyd Borrett.

#5 Dean

    Loves Etomite Forums!

  • Admin
  • 4,746 posts
  • Gender:Male

Posted 21 August 2006 - 04:15 PM

This is ThickBox running on the etomite.com website :-)

#6 mikef

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,551 posts

Posted 21 August 2006 - 04:34 PM

View PostDean, on Aug 21 2006, 05:15 PM, said:

This is ThickBox running on the etomite.com website :-)
So you'll be doing a tyle for EtoGalThumb next, then? :betterwink:

#7 Dean

    Loves Etomite Forums!

  • Admin
  • 4,746 posts
  • Gender:Male

Posted 21 August 2006 - 04:59 PM

The ThickBox one comes with it ;-)


[any files below that have file extension .js.php need to be renamed to .js]

(1) Upload all the four files below into the root of your etomite website
(2) Add the following into your <head></head> bit in your template
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/thickbox.js"></script>
<link rel="stylesheet" href="/thickbox.css" type="text/css" media="screen" />
(3) Wherever you have an <img> tag, make it into the following format:
<img src="filename.jpg" title="Whatever you want the description to be" class="thickbox" rel="gallery-name" />

Attached Files


#8 mikef

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,551 posts

Posted 21 August 2006 - 05:46 PM

Yes, its step 3 that needs to be put into an EtoGalThumb style.

#9 Dean

    Loves Etomite Forums!

  • Admin
  • 4,746 posts
  • Gender:Male

Posted 21 August 2006 - 06:01 PM

Ok, well I'm just having a look at standard EtoGal, to see how easy it is to do... and allows me to check out etoGal :P

#10 mikef

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,551 posts

Posted 21 August 2006 - 08:34 PM

Have fun!

If you get stuck putting it in EtoGal, have a look at EtoGalThumb, as the programming approach is very different.

(In Etogal, the HTML and PHP code is all intermingled; in EtoGalThumb you should need very little PHP code, you mainly just need to write a kind of HTML template (in three fragments) with lots of replaceable parameters)

#11 mikef

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,551 posts

Posted 27 August 2006 - 09:48 PM

OK, Here is an example of etoGalThumb1.1 beta 3 using Thickbox, with just a new style definition:

Quote

// style=slideshow
$styleStrings[slideshow]['header']=0;
$styleStrings[slideshow]['tail']=0;
$styleStrings[slideshow]['image']=<<<IMG
<a href="%%file%%" class="thickbox" rel="gallery-test" ><img style='padding: 1em 0 1em 1em ; text-align:center;' src='%%file%%' title='%%title%%' alt='%%sdesc%%' align="middle" %%size%% /></a>
IMG;
(of course you need to add the thickbox scripts and css to the template as well!)



Sadly, its not yet entirely practical. A limitation of EGThumb (so far) is that it only allows you to reference either the full size or the thumbnail image, but not both, since i hadn't thought of using it this way. So this demo uses the fullsize images rather than thumbnails to display the thumbnails, leaving the browser to shrink them to a 'thumbnail' size. Thats why there's only four images, so tht it doesn't take too long to load the first page.

Quote

[[EGThumb11b3u?gal=54&count=4&style=slideshow&fullsize=1&resize=150]]

the released EGThumb will add the capabilty to reference both the real thumbnail and the full size image!

Quote

edit: demo URL updated. the current version of EtogalThumb (EtoGalThumb12preliminary) adds proper support for Thickbox using thumbnails on the overview page, and the full size images in the slideshow. It also includes the nessary style to implement this.

Edited by mikef, 26 January 2007 - 10:45 AM.

#12 mikef

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,551 posts

Posted 28 August 2006 - 11:49 AM

... and http://www.art4cheshire.org.uk/slideshow2.html shows it working with the modified version EtogalThumb (one extra line of code, and two lines modified)

It doesn't show the loading animation (which didn't show up as an error in the first version, as the file was already loaded), but thats part of th Thickbox code, not mine, and their website is down today so I can't check the Tickbox installation instructions to see what I haven't done.

Edited by mikef, 26 January 2007 - 11:10 AM.

#13 Dean

    Loves Etomite Forums!

  • Admin
  • 4,746 posts
  • Gender:Male

Posted 28 August 2006 - 11:51 AM

what you need to do, is upload the animation to lets say, assets :)

then modify the thinkbox.js file (a few lines down), it has the path to the animation :)

#14 mikef

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,551 posts

Posted 28 August 2006 - 12:17 PM

View PostDean, on Aug 28 2006, 12:51 PM, said:

what you need to do, is upload the animation to lets say, assets :)

then modify the thinkbox.js file (a few lines down), it has the path to the animation :)
Thanks Dean, now done.

#15 cathode

    Loves Etomite Forums!

  • Staff
  • 648 posts
  • Gender:Male

Posted 28 August 2006 - 08:38 PM

This is pretty cool... wow. So is what final consensus on doing this with EtoGal or EtoThumb?

#16 mikef

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,551 posts

Posted 28 August 2006 - 08:54 PM

My view, probably stated in other parts of this Etogal section, is that new user interface options should not go into the EtoGal snippet, which is not really structured to handle them easily, but should go into EtoGalThumb, EtoGalGallery, or EtoGalList as appropriate.
I don't actually want thickbox, but making it work proved how flexible EtoGalThumb is - proof of concept with just a pretty simple EtoGalThumb style, and ten minutes putting extra code into EtoGalThumb to do the job properly. And EtoGalThumb gives more flexibility in selecting which images you want to include.

#17 mikef

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,551 posts

Posted 18 September 2006 - 01:30 PM

EtoGalThumb 1.2 (preliminary version available here) adds the necessary support, and a suitable style.

#18 mikef

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,551 posts

Posted 26 January 2007 - 10:25 AM

Sorry - just realised the demo page above is deed.

There is now a demo at http://www.art4cheshire.org.uk/slideshow2.html

#19 kissman

    Etomite Forum Newbie

  • Member
  • 11 posts

Posted 25 April 2007 - 09:06 PM

View PostDean, on Aug 21 2006, 05:59 PM, said:

The ThickBox one comes with it ;-)
[any files below that have file extension .js.php need to be renamed to .js]

(1) Upload all the four files below into the root of your etomite website
(2) Add the following into your <head></head> bit in your template
&lt;script type="text/javascript" src="/jquery.js"></script>
&lt;script type="text/javascript" src="/thickbox.js"></script>
<link rel="stylesheet" href="/thickbox.css" type="text/css" media="screen" />
(3) Wherever you have an <img> tag, make it into the following format:
<img src="filename.jpg" title="Whatever you want the description to be" class="thickbox" rel="gallery-name" />
i maked all steps, but inserted images is still in full size :( loook at http://www.pichrt.info/air-spotting/index.php?id=54 :huh:

Edited by kissman, 25 April 2007 - 09:07 PM.

#20 Dean

    Loves Etomite Forums!

  • Admin
  • 4,746 posts
  • Gender:Male

Posted 25 April 2007 - 11:20 PM

Your URL isn't valid.
Back to Wish-List


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users