Feb 26 2010

Adding a light box to your Store

one thing that drives me nuts day in and day out is images that enlarge in a new window or on a new page! why when there are so many free options out there that can help you “click to enlarge”. what i will show you today is how to add a light box to your yahoo store. and i am not going to use one that does the full-page only because it has a lot more javascript then i like running (more http request the slower the page loads) i am going to use this option from a site called Dynamic Drive, you can get the code here.at this moment and time you should have custom templates in your store so i will not go over that but we will start by finding the template yhst-#########-image that template should look a lot like this

we need to focus on this part right here

Now from dynamic drives web site we need to grab some code like this
rel="lightbox" from here we will turn it into "rel=\"lightbox\""
with rtml and most scripting languages you need to have a \ when you use a "

with that code that we will click “new” at the top then paste it into the “simple” box hit “update” then we will click on the “\”" and click “paste after” and you are done with the RTML

now we need to add the javascript and css to the mix and to do that all we need to do is upload the files to the lib files and enter the code to the head tags in variables, so if you have not downloaded the zip file from dynamic drive do so now and unzip the file, then upload to the library files in the store keep the url for it so it will look like /lib/yhst-######/lightbox.js and /lib/yhst-######/lightbox.css we will need to do the same for the 3 images as well. once you have all of that uploaded time for the head tags. this code

<link rel=”stylesheet” href=”/lib/yhst-###########/lightbox.css” type=”text/css” media=”screen” />
<script type=”text/javascript” src=”/lib/yhst-###########/lightbox.js”></script>

now you just need to test and make sure it works. as always publish is the best test. and if I missed anything please tell me I will be more than happy to fix it.

Tags: , , , , , , , , ,

categories RTML, web design, Yahoo store | | 26 February 2010 |

15 Comments

  • By rocketfireworksNo Gravatar, April 14, 2010 @ 11:40 am

    Question for you:

    I installed Shadowbox (something similar) to display product videos (from youtube) without jumping to a new page or having to have a pop-up window.
    BUT, there is a conflict it seems btwn the shadowbox javascript and YahooStore script so that now I am having issues with YahooStore Floating Cart.
    *** I did not change any RTML at all. Do you know if I can do anything to make shadowbox work with YahooStore?
    ** Or, if not, maybe I csn use Lightbox to call on YouTube vids??
    an example of my shadowbox in action is at:
    http://www.rocketfireworks.ca/cakes.html
    — click on any “VIDEO” icon —

    Thanks a mil for any help u can give!

  • By drifterz28No Gravatar, April 14, 2010 @ 1:41 pm

    well this would require some testing. i do have a lightbox that you can get from dynamic drive http://dynamicdrive.com/dynamicindex4/facebox/index.htm
    that will let you open a div tag or an iframe and i do have it working on a store with the floating cart. give that a try and hope this helps

  • By Joshua RayNo Gravatar, April 17, 2010 @ 2:27 am

    I just added this as a test and found it pretty straight forward with a little css knowledge and a good working knowledge of how to get around in the store. http://videobox-lb.sourceforge.net/

  • By Joshua RayNo Gravatar, April 17, 2010 @ 3:33 am

    ok so found an issue :

    I added :

    #nav-product {
    z-index : 25;
    }

    to accommodate the original light box and that seems to conflict with the focus of this new video pop up lightbox. E-comm any clues?

  • By E-commNo Gravatar, April 17, 2010 @ 3:47 am

    do you have a link to the code you are using? try to remove the z-index from the css base in the store you are working on. that z-index is just a hack for ie6 and is not needed for current web browser

  • By Joshua RayNo Gravatar, April 18, 2010 @ 12:20 am

    good call out on the css base. I’ll check that and let you know how it works out. the code I am using is from the link above. I added the z-index edit to fix the focus issue caused by the lightbox. I have the light box here http://store.cdrnaturals.com/immune-support.html

  • By Joshua RayNo Gravatar, April 18, 2010 @ 2:56 am

    that did it. removing z-index from the base removed the need for it in the css-edits and both display properly. Thanks.

  • By ronNo Gravatar, June 15, 2010 @ 9:42 am

    can you help me pl? I am getting stuck at the Rtml part.

     TAG-WHEN tag STRING-APPEND
                                   "a href=\""
                                   IMAGE-REF image image
                                   "\""
                                   "rel=\"lightbox\""
                             test AND
                                    OR
                                      < value1 h
                                        value2 origh
                                      < value1 w
                                        value2 origw

i am not sure what tag to use  

 TAG-WHEN tag STRING-APPEND
                                   "a href=\""
                                   IMAGE-REF image image
                                   "\""
                                   "rel=\"thumbnail\""
                             test AND
                                    OR
                                      < value1 h
                                        value2 origh
                                      < value1 w
                                        value2 origw

    but they are not working for me. what am i missing?

    TY

  • By drifterz28No Gravatar, June 15, 2010 @ 7:01 pm

    you just need to add this part here, “rel=\”thumbnail\”"
    and did you add the JavaScript and CSS files

  • By ronNo Gravatar, June 15, 2010 @ 7:55 pm

    I have lightbox working but I have to use the html link like Dan for it to work but its not working on default product image on the item pages tho.

    http://store.dreamsofglass.com/diglartpe11.html

    look for the Dan link in Product Description ( lightbox test )

  • By ronNo Gravatar, June 15, 2010 @ 9:55 pm

    i got it working TY for the help

  • By plattaNo Gravatar, January 13, 2011 @ 2:15 am

    This is a VERY helpful article. And I want to ask for a bit more help to help smooth a glitch out.

    But first I want share with everyone a bit of info that helped me in setting up the light box at my site http://www.cesarani.com – share info that geared me up for working with the RTML templates.

    drifterz28′s article is very straightforward about editing the RTML in the “image” template but I found I needed 2 bits of information to build my confidence to move forward 1) I needed to know what is for sure my yahoo store id (this becomes less important if you are using v3 of YStore but I needed to learn this) and 2) I’m comfortable working with code and scripts but what are the consequences of playing around with yahoo’s front end rtml editor – in other words, I needed a thoughtful plain language “this is what this does when you press this” description.

    Here’s how you find your YStore ID
    http://help.yahoo.com/l/us/yahoo/smallbusiness/store/aboutms/aboutms-09.html

    Here’s what you need to read before you start to install your lightbox – this is the “how to edit your RTML” guide in YStore v 3.0 – basically, if you copy your “storetemplate.” and rename it, you create a whole copy of all the rtml templates (and it also automatically uses your YStore ID in the copy (in v2 you need to rename files manually using your YStore id)). As for consequences – you never actually edit the default, rather only the custom copy. And this is important to know b/c if you mess up, just revert back to using the default template. Take your time with this – it’s a very straightforward and helpful read.
    lightbox js – Editing RTML for YStore 3.0
    http://www.ytimes.info/howtomodtem.html and
    http://www.ytimes.info/rtml-tutorial.html

    After I read the above, I just followed the edit to the my custom “image” template in drifterz28′s article and the other instructions for changing the variable head tag and downloading the files needed here
    http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm and I was fine.

    But here’s my request for info – not everything fades in to the lightbox background and I need info on what to edit next to fix this.

    Specifically, when you click the item image, the js does what it’s supposed
    to do – the background darkens and a new image comes in to the foreground. But
    also in the foreground are the navigation buttons to the left of the item,
    as well as my “sharethis.com” buttons.

    Can anybody please help me with a fix for this? drifterz28, you there?

    Thanks all.

  • By E-commNo Gravatar, January 13, 2011 @ 8:15 pm

    the nav bar will stick out, that is because the z-index of the items is set higher than the shadow, take a look at the css of the items in question and look at it with firebug, from there change the z-index to 1 or 2 and that should fix it.
    so in your CSS-edits add
    #nav-product {z-index:1;}

    and that should fix it.

    also I have a nice getting started here http://e-commsolution.com/getting-started-with-rtml/

Other Links to this Post

  1. Tweets that mention Adding a light box to your Store | E-comm Solution -- Topsy.com — April 7, 2010 @ 3:09 pm

  2. Adding more images to the Yahoo! Store | E-comm Solution — May 28, 2010 @ 3:19 pm

RSS feed for comments on this post.

Leave a comment

You must be logged in to post a comment.