Limit number of displayed Lightbox Icons

Adds a Lightbox slideshow to your products.
Post Reply
yanni
Posts: 20
Joined: Mon Nov 16, 2009 3:14 pm

Limit number of displayed Lightbox Icons

Post by yanni »

I would like to have a max of 4 thumbnail images on a page but more than 4 lightbox images all together.
So let's say if i have 10 lightbox images, when someone clicks on one of the 4 thumbnails, the lightbox preview begins and you can carry on clicking next until the last 10th image.

In otherwords something like:

Display thumbnails for Images 1-4
Do not display thumbnails from 5-10 but allow to see when Lightbox is on.

Is this possible, if it is what do I need to alter ?
Thank you.
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Hidden Lightbox Images

Post by norman »

One way is to put the Lightbox Image List layout within a fixed size DIV with overflow hidden:
You can do this by setting LightboxPrefix to (this gives 4 across):

Code: Select all

<br /><div style="width:215px; height:52px; overflow:hidden;">
And LightboxSuffix to:

Code: Select all

</div>
Tweak the numbers till things fit as you'd like. And maybe change the inline style to a class.

Also try amending the above to use overflow:auto; and you'll now have scrollbars to get at the other icons.
Norman
yanni
Posts: 20
Joined: Mon Nov 16, 2009 3:14 pm

Re: Hidden Lightbox Images

Post by yanni »

Thanks Norman for the reply,

Trying to adjust the height of the div doesn't work very well with all browsers.
You adjust the height for IE and on Chrome the last photo is chopped, then you do that with Chrome and depending on release version might not look exactly as needed on Safari and so forth.
I've got the feeling it's got to do with the way padding is translated in different browsers.

Also in a modern looking website I try to avoid scroll bars like the plague!
Is there another way of achieving this perhaps with a bit of pearl programming i.e display thumbnails 1-4 however on Lightbox display from 1-end or something.

Thanks a lot.
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Hidden Lightbox Images

Post by norman »

This isn't Lightbox problem but a web-design one. Best ask your web-designer for help (because that's not in my skill-set).

Some suggestions:

I believe you can style the scrollbars.

Make the DIV big enough for all browsers. Allow space for scrollbars.

Use a jQuery scroller to add forward / back arrows.

Do as all other Lightbox users do and show all the icons.

Tweak the Lightbox Layouts to stop generating icons (or make them hidden) after the 4th one.
Norman
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Hidden Lightbox Images

Post by norman »

Here's how to tweak Lightbox so that LightboxIconsAcross becomes an effective Lightbox Icons Limit.
Note that this tweak is for Lightbox V4 only. It won't apply to earlier versions.

Edit layout Lightbox Image List and look for:

Code: Select all

				$lbiconcode .= "$separator<a href=\"$LightBoxImage\" rel=\"lightbox-$ProductAnchor\" title=\"$title\">"
				   . "<img border=0 src=\"$ScaledIconName\" width=\"$LightBoxIconWidth\" height=\"$LightBoxIconHeight\""
				   . " alt=\"$title\" /></a>";
				if ( ++$iconcount >= <actinic:variable name="LightBoxIconsAcross" selectable="false" /> )
					{
					$lbiconcode .= '<actinic:variable name="LightBoxIconsAcrossCode" encoding="perl" selectable="false" />';
					$iconcount = 0; 
					}
Replace it with:

Code: Select all

				$lbiconcode .= "$separator<a href=\"$LightBoxImage\" rel=\"lightbox-$ProductAnchor\" title=\"$title\">";
				if ($iconcount++ < <actinic:variable name="LightBoxIconsAcross" selectable="false" />)
					{
				   $lbiconcode .= "<img border=0 src=\"$ScaledIconName\" width=\"$LightBoxIconWidth\" height=\"$LightBoxIconHeight\" alt=\"$title\" />";
				   }
				$lbiconcode .=  "</a>";
Make sure that LightboxIconsAcross is set to at least 1.

If you use Lightbox on Fragments, do the same thing to layout Fragment Lightbox Image List.

PS. I've changed the thread title to "Limit number of displayed Lightbox Icons" so others can find it.
Norman
yanni
Posts: 20
Joined: Mon Nov 16, 2009 3:14 pm

Re: Limit number of displayed Lightbox Icons

Post by yanni »

Thanks Norman,

I don't seem to have this variable "LightboxIconsAcross" .
It is actually not mentioning on the "read me" file either, please see below.
I did create a variable with that name, make it a number and gave it a value of 4 but now the thumbs
have disappeared.

How can I fix this?



READ ME file
---------------------------------------------------


Lightbox / Slimbox - jQuery version. Add a slideshow to your products. V3.07.

You only need to supply large images. Small icons are automagically created.

This patch is for Actinic version 9.


PRELIMINARY

Before proceeding please make a Snaphot and back up all of your Site folder just in case...

This patch uses the jQuery JavaScript Library v1.3.2.
If you are already using this library (unlikely - Actinic does not use it),
you may want to keep your current version if it's a later release.


INSTALLATION

Unzip this zipfile into your Site folder.

In your Site folder, create a new sub-folder called AutoScaledImages

Run Actinic and do File / Snapshot / Import Site

Choose the file Lightbox.acd (from your Site folder) and proceed with the import.

The import should have a description:

Lightbox slideshow capability.
Partial Site Design only. Safe to import into existing site.
(c) 2007 - 2010 drillpine.biz

Sometimes Actinic is a bit flaky importing, so repeat the import as above (i.e. do it twice).

Go to Design / Library / Layouts / Products / ProductLayout / Values.
Select "Standard Layout Using CSS - Lightbox Below Product Image" and click [>]
Select "Standard Layout Using CSS - Lightbox Beside Product Image" and click [>]
This will make them selectable within your product Details / Layout / Product / Product Layout.

Go to Design / Library / Layouts / Fragments / FragmentLayout / Values.
Select "Fragment Layout Using CSS - Lightbox At Bottom" and click [>]
This will make it selectable within your Page Details / Layout / Fragment / Fragment Layout.


Select a Section in the Content Tree, go to Design mode and open your Overall Layout.
Look for the line

</head>

(NB not the <head> line near the top - the line we want is about 64 lines down)

Immediately above this line add:

<actinic:variable name="Lightbox" value="Lightbox Support" />


Click Apply, close and restart Actinic and that's installation done.


OPERATION

Two example product layouts are provided:-
Standard Layout Using CSS - Lightbox Below Product Image
Standard Layout Using CSS - Lightbox Beside Product Image
Select this as your Product Layout.

Your Product Details will now have a new tab Lightbox.

In this tab set LightboxImage 1 through LightboxImage10 to contain the images you want to display.
You can leave unused entries empty.

You can also set LightboxTitle 1 through LightboxTitle10 to contain short descriptions for these images.
You can leave entries empty if you want (the product name will be used).

You can also use this on Fragments.
An example fragment layout is provided:-
Fragment Layout Using CSS - Lightbox At Bottom
Select this as your Fragment Layout.



NOTES

If you go to Settings / Site Options / Properties, you can set variables:

LighboxIconBackGroundColour 6 digit hex code of background to use.
LightboxIconHeight Height in pixels of icon.
LightboxIconWidth Width in pixels of icon.
LightboxPrefix HTML to place before list of icons.
LightboxIconSeparator HTML to place between icons.
LightboxSuffix HTML to place after list of icons.
LightboxIconQuality The JPG compression quality to use for the icons
(0 is worst, 100 is best - default is 75).
LightBoxShowSourceFileName Whether to include the original file name as part of the
generated icon filenames. Only needed for testing.

The variables LightboxIconWidth and LightboxIconHeight can be set as follows:

If you set LightboxIconWidth to a non-zero value and set LightboxIconHeight to be 0 then
icons are displayed at a fixed width and varying height.

If you set LightboxIconHeight to a non-zero value and set LightboxIconWidth to be 0 then
icons are displayed at a fixed height and varying width.

If you set LightboxIconHeight and LightboxIconWidth to non-zero values then
icons are displayed at a fixed height and width with borders added if necessary.



CUSTOMISATION

The above can also be set at the Section or Product level to give a different look to different
pages or products.

Lightbox only creates a set of alternate images if some of the variables LightboxImage1
through LightboxImage6 contain images. If they're all empty then nothing is generated.
This means that you can include this capability on standard product layouts and nothing will
be displayed unless required.

If you want to add this capability to your own Layout(s) then in Design View,
in the product layout(s) where you want this capability, right-click and insert

<actinic:variable name="Lightbox" value="Lightbox Image List" />

Alternatively, you could add this to the Standard Product Image layout in order
to apply it to all products.

For Fragments, you can add this capability to other fragment layouts by inserting

<actinic:variable name="Lightbox" value="Fragment Lightbox Image List" />

EXTENDED INFO PAGES

If using on Extended Info pages, Look in your extended info layout for the line

</head>

(NB not the <head> line near the top - the line we want is further down)

Immediately above this line add:

<actinic:variable name="Lightbox" value="Lightbox Support" />

In the place where where you want thie icons to display, add the line:

<actinic:variable name="Lightbox" value="Lightbox Image List" />


DEPLOYING LIGHTBOX WITH SNAPSHOTS

If you deploy a Snapshot to another site, then also send this Zipfile too.
Unzip this Zipfile into the destination Site folder.



TECHNICAL INFO

Snapshot Details:

Variables (*Selectors):
Lightbox *
LightBoxIconBackgroundColor
LightBoxIconHeight
LightBoxIconQuality
LightboxIconSeparator
LightBoxIconWidth
LightboxImage1
LightboxImage2
LightboxImage3
LightboxImage4
LightboxImage5
LightboxImage6
LightboxImage7
LightboxImage8
LightboxImage9
LightboxImage10
LightboxPrefix
LightBoxShowSourceFileName
LightboxSuffix
LightboxTitle1
LightboxTitle2
LightboxTitle3
LightboxTitle4
LightboxTitle5
LightboxTitle6
LightboxTitle7
LightboxTitle8
LightboxTitle9
LightboxTitle10

Property tabs:
Lightbox

Layouts:
Lightbox Image List
Lightbox Support
Fragment Lightbox Image List
Fragment Layout Using CSS - Lightbox At Bottom
Standard Layout Using CSS - Lightbox Below Product Image
Standard Layout Using CSS - Lightbox Beside Product Image



CHANGE LOG

21-01-10 V3.07 Minor Bugfix. LightboxTitle 1 through LightboxTitle10 weren't available in Fragments
Changes:
Variables:
LightboxTitle1
LightboxTitle2
LightboxTitle3
LightboxTitle4
LightboxTitle5
LightboxTitle6
LightboxTitle7
LightboxTitle8
LightboxTitle9
LightboxTitle10

30-09-09 V3.06 jQuery version.
Moved code above </head> to new layout.
jQuery only loaded if not already present.
Changes:
Layouts:
Lightbox Image List
Fragment Lightbox Image List
Lightbox Support (new)
Files:
slimbox2.css (new)
slimbox2.js (new)
This ReadMe (code above </head> tag changed)

08-04-09 V3.05 Major change. Speedup by 10+ times. No file writing needed unless images change.
AutoScaledImages now use filename related to original image MD5 and resizing parameters.
AutoScaledImages now written using saveimageforced.
Changes:
Layouts:
Lightbox Image List
Fragment Lightbox Image List
Variables:
LightBoxShowSourceFileName

14-03-09 V1.10 Reliability. Improved code in dpimagesupport.php.
Changes:
Files:
dpimagesupport.php (now V1.03)

26-08-08 V1.09 Typo in Lightbox Image List layout - error in line 61!
Helper images weren't being uploaded. Added quotes to URL's in slimbox.css.
Changes:
Layouts:
Lightbox Image List
Files:
slimbox.css

26-08-08 V1.08 Updated to use SlimBox 1.64. Fixes bug where drop-down boxes don't send choice to cart.
Changes:
Files:
mootools.js (new)
mootools.1.11.js (copy of mootools.js - for existing users who are upgrading)
slimbox.js
slimbox.css

18-08-08 V1.07 Updated to allow .GIF and .PNG files in lightbox.
Changes:
Layouts:
Lightbox Image List
Fragment Lightbox Image List

30-03-08 V1.06 Slimbox version.
Changes:
Updated:
This Readme.
Files changed:
Lightbox files removed from Zip and Slimbox ones added.

04-02-08 V1.06 Layout "Fragment Lightbox Image List" wasn't in Snapshot.
Changes:
Updated:
LightBox.acd

16-10-07 V1.05 Amended lightbox.js for compatibility with other code.
Added note to ReadMe regarding prototype.js and scriptaculous versions.

16-10-07 V1.04 Added capability to Fragments.

12-10-07 V1.03 Allow for up to 10 images. Tidied array code.

12-10-07 V1.02 Improved installation. Renamed image files (all begin li_).
Added dummy filenames to lighbox.js so they'd upload.
Added info on Snapshotting.

12-10-07 V1.01 Update. Rounded calculated heights and widths.

11-10-07 V1.00 Initial release.
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Limit number of displayed Lightbox Icons

Post by norman »

My tweak is for Lightbox V4. You're using Lightbox V3 from about 1 1/2 years ago. It won't work there.

Lightbox V4 is a major change and you'd need an upgrade at £25 +VAT to use it.
Norman
Post Reply