+ Reply to Thread
Results 1 to 15 of 15

Thread: Slimbox

  1. #1
    Client pdunton's Avatar
    Join Date
    Apr 2006
    Location
    Tucson, Arizona
    Posts
    557
    Squirrelcart version
    v3.4.1

    Slimbox

    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>

  2. #2
    Client pdunton's Avatar
    Join Date
    Apr 2006
    Location
    Tucson, Arizona
    Posts
    557
    Squirrelcart version
    v3.4.1

    Found Prev and Next

    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.

  3. #3
    Client pdunton's Avatar
    Join Date
    Apr 2006
    Location
    Tucson, Arizona
    Posts
    557
    Squirrelcart version
    v3.4.1

    Fixed Next and Prev Problem

    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.

  4. #4
    Squirrelcart Staff Jamie's Avatar
    Join Date
    May 2002
    Posts
    6,829
    Squirrelcart version
    v3.3.7
    Quote Originally Posted by pdunton View Post
    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.

  5. #5
    Client coastalrugs's Avatar
    Join Date
    Dec 2007
    Posts
    171
    Squirrelcart version
    v3.2.0
    Just to clarify WHY the images were not linking:

    It appears that the lightbox link for the main image is:
    Code:
    lightbox[product-1005]
    whereas the link for the manually added items is:
    Code:
    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.

  6. #6
    Client pdunton's Avatar
    Join Date
    Apr 2006
    Location
    Tucson, Arizona
    Posts
    557
    Squirrelcart version
    v3.4.1

    Editor Unfriendly

    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?

  7. #7
    Client pdunton's Avatar
    Join Date
    Apr 2006
    Location
    Tucson, Arizona
    Posts
    557
    Squirrelcart version
    v3.4.1

    Got it!

    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.

  8. #8
    Client tgrant's Avatar
    Join Date
    Mar 2011
    Posts
    132
    Squirrelcart version
    v3.3.2
    Quote Originally Posted by pdunton View Post
    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!
    Regards,

    Tom

  9. #9
    Client pdunton's Avatar
    Join Date
    Apr 2006
    Location
    Tucson, Arizona
    Posts
    557
    Squirrelcart version
    v3.4.1

    Cool Sure...

    The CSS file to change is squirrelcart/lib/slimbox/slimbox.css.php
    Changed this:
    Code:
    #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:
    Code:
    #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

  10. #10
    Client tgrant's Avatar
    Join Date
    Mar 2011
    Posts
    132
    Squirrelcart version
    v3.3.2
    Thanks so much Phil! I never would have found that! That was very generous of you to help out. Many thanks!
    Regards,

    Tom

  11. #11
    Squirrelcart Staff Jamie's Avatar
    Join Date
    May 2002
    Posts
    6,829
    Squirrelcart version
    v3.3.7
    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.

  12. #12
    Client tgrant's Avatar
    Join Date
    Mar 2011
    Posts
    132
    Squirrelcart version
    v3.3.2
    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
    Regards,

    Tom

  13. #13
    Squirrelcart Staff Jamie's Avatar
    Join Date
    May 2002
    Posts
    6,829
    Squirrelcart version
    v3.3.7
    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.

  14. #14
    Client pdunton's Avatar
    Join Date
    Apr 2006
    Location
    Tucson, Arizona
    Posts
    557
    Squirrelcart version
    v3.4.1

    I had tried that

    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

  15. #15
    Client pdunton's Avatar
    Join Date
    Apr 2006
    Location
    Tucson, Arizona
    Posts
    557
    Squirrelcart version
    v3.4.1

    Cool Got That Working

    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.

+ Reply to Thread

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts