Slimbox

[pdunton]

Attempting to utilize the Slimbox implementation included in Squirrelcart.

A. I can include images in the product description area as explained in the SC docs. These images are recognized by Slimbox and display with the text "image 1 of 3" or whatever. I have not been able to get these images included with the product large image displayed by default. Examining the page source code shows that each image has the same lightbox[product-xxxx] reference.
Need input on why the images aren't combined.

B. There is no "next" or "back" indicator when Slimbox does see multiple images. I know that using the forward and back arrow keys work to switch the images. This tests OK.
How do I get some user guidance on the Slimbox display?

Here is a link to a page as described.
http://www.manzanitalab.com/products...ossil-nautilus

Here is the include code I'm using.
<a href="http://www.manzanitalab.com/sc_images/products/1005_scaled.jpg" rel="lightbox
[product-PROD_RN]" target="_blank"><img alt="" width="90" height="68" src="http://www.manzanitalab.com/sc_images/products/1005_scaled_thm.jpg" /> </a>

[pdunton]

Reading the CSS and JS gave me the location of the Previous and Next operation buttons.
These are only visible if the mouse hovers over the image.
This is going to be a problem. If I didn't think to hover over the image, why should my customers realize to do that? They won't likely have access to the source code.
There needs to be a cue somehow. I remember working with Lightbox a year or so ago and it had fixed clickable labels for the functions.

Looking for a code solution.

[pdunton]

Turned out to be an easy fix in the CSS.
Now the Prev and Next clickable labels are fixed displays as dictated by presence of images and position within the sequence.

Still no luck in getting the included image sequence tied to the large image.

[Jamie]

Still no luck in getting the included image sequence tied to the large image.

If you are adding the link via the rich text editor on the product's record, click where the link is, then click the link icon in the toolbar. Click advanced and add this for the "Rel" field:
lightbox[product-PROD_RN]

That will ensure that any images you link to have the same rel attribute as the large image link.

[coastalrugs]

Just to clarify WHY the images were not linking:

It appears that the lightbox link for the main image is:

lightbox[product-1005]

whereas the link for the manually added items is:

lightbox
[product-1005]

(notice the carriage return)

Jamie's advice is correct, to rely on SC to build the links for you. Any way you decide to perform the task, just eliminate the carriage return. This is the root cause of the linking trouble.

[pdunton]

Trying the above works to an extent.
I can insert a link that works but I don't want to display a series of links in the description text. If I remove the link text, the editor removes the entire link on save!
Maybe the link can be hidden using CSS?

[pdunton]

Thanks to all for the push I needed.
A style of display: none hides the link.

The URL above now works correctly although I doubt it will pass W3C muster because of the brackets on the lightbox rel.

Something to check later.

[tgrant]

Turned out to be an easy fix in the CSS.
Now the Prev and Next clickable labels are fixed displays as dictated by presence of images and position within the sequence.

Hi! Would you be able to point me to the area in the style_main.css where I adjust this so the PREV & NEXT buttons show all the time ? Thanks!

[pdunton]

The CSS file to change is squirrelcart/lib/slimbox/slimbox.css.php
Changed this:

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(nextlabel.gif) no-repeat 100% 15%;
}

to this:

#lbPrevLink {
    background: transparent url(prevlabel.gif) no-repeat 0 15%;
	left: 0;
}

/*
#lbPrevLink:hover {
	background: transparent url(prevlabel.gif) no-repeat 0 15%;
}
*/

#lbNextLink {
	background: transparent url(nextlabel.gif) no-repeat 100% 15%;
	right: 0;
}
/*
#lbNextLink:hover {
	background: transparent url(nextlabel.gif) no-repeat 100% 15%;
}
*/

Works for me!

Phil,
Tucson

[tgrant]

Thanks so much Phil! I never would have found that! That was very generous of you to help out. Many thanks!

[Jamie]

Hi Guys,

You might want to try dropping that block of CSS in your style_main.css.php stylesheet file, in your custom theme folder. That should ensure that those changes remain if you end up upgrading in the future, as the squirrelcart/lib folder would get replaced in the upgrade process and your custom theme won't.

[tgrant]

Hi Jamie:

I was wondering about that! So all I need to do is drop that code anywhere in the style_main.css and Squirrelcart will find it ? Thanks

[Jamie]

That should work. To make sure, you would need to put the changes in style_main.css.php and remove them from the slimbox CSS file.

[pdunton]

Hi Jamie:
I had tried putting the CSS in the style_main file.
The CSS was not picked up from style_main and the "Next" button was not displayed unless the #lbnext was in the Slimbox.css file.
Didn't spend any time troubleshooting.
Just made a note about the mod to the Slimbox.css.php file.
Phil
Tucson

[pdunton]

As noted above, just moving the CSS to style_main.css.php didn't work.

Problem is the "url" function didn't find the image files.
DUH!
Moved the nextlabel.gif and prevlabel.gif to the active theme folder and all is well.
So, in addition to editing style_main, remember to move the images related to the edits.

Phil
in Tucson.