A Yahoo! Store Click To Enlarge Tutorial!

  • You DO NOT need an account in order to download the content that we host....ONLY make an account if you plan to be an ACTIVE member.
  • We DO NOT Allow Multiple Accounts, those people found to have more than one linked to their IP address Will be Banned.

Stunod

Co-Owner
Staff member
VIP
Co-Owner
Jun 23, 2016
1,042
113
StunodRacing
A Yahoo! Store Click To Enlarge Tutorial!

49256


Many Yahoo! Store sites today use a script of some sort to show a larger image of the product with out leaving the product page. I will write this so the beginners would find it easy to follow.

This is only for the Yahoo! Store Editor V3.

You also must know how to edit RTML for this tutorial.

Here are some Videos By - Your Museum Store: Video Tutorial Part 1 | Video Tutorial Part 2 | Video Tutorial Part 3

1. Finding the right script.

There are many different lightbox scripts out there for free to download. The one that I am using in this tutorial is going to be the "Highslide JS" script by Torstein Hønsi. Here are the link to the site that you can download them from! You may also do a Goggle search for others if you don't see the one you want!

Highslide JS - Click Here
Lightbox Jr - Click Here
Facebox - Click here
Lightbox 2.03a - Click Here



2. Download & Upload Scipt

Once you have downloaded your Lightbox script upload to your website. You must keep in mind that you have have a website with a out side page than your website must be as followed "http://www.yoursiteurlhere.com" if you have your Yahoo! store set at your home page then your website links must be "http://site.yoursiteurlhere.com".



3. Setting the header scripts

Most all of the lightbox scripts require you to insert a java script into the header of each page you would like the script to work on. Here is how this is done! With Yahoo! Store template if you edit one you will edit it for every page. Gotta love that!!!

Login into your store manager >> Store Editor >> Variables

Now scroll down the page until you find the "Head-tags" text box. Then paste the head tag script in text box.

JavaScript:
<!-- Highslide js Script begins -->
<!--
    1 ) Reference to the files containing the JavaScript and CSS.
    These files must be located on your server.
-->

<script type="text/javascript" src="http://site.yoursiteurlhere.com/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="http://site.yoursiteurlhere.com/highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://site.yoursiteurlhere.com/highslide/highslide-ie6.css" />
<![endif]-->



<!--
    2) Optionally override the settings defined at the top
    of the highslide.js file. The parameter hs.graphicsDir is important!
-->

<script type="text/javascript">
hs.graphicsDir = 'http://site.yoursiteurlhere.com/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'glossy-dark';
hs.wrapperClassName = 'dark';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;

// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
    //slideshowGroup: 'group1',
    interval: 5000,
    repeat: false,
    useControls: true,
    fixedControls: 'fit',
    overlayOptions: {
        opacity: .6,
        position: 'bottom center',
        hideOnMouseOut: true
    }
});

</script>

<link href="http://site.yoursiteurlhere.com/highslide//highslide.css" rel="stylesheet" type="text/css" />


<!-- Highslide js Script ends -->



4. Preparing for RTML Editing

Okay, now that we have the files downloaded and uploaded to your website server and the head scripts are in place we can now work on getting the store editor to regionalize the click to enlarge script when you click on it. This is going to require you to do a bit of RTML editing.

On the store editor tools is a red arrow on the right to open the "Advanced Editor". Once the second line of options show up if not already click on the "templates" or "storetemplates" button.

If you clicked on "storetemplates" then we you get to the next page you will have to click on the "templates" button on the top of the page to show you all of your store templates.

Now we are looking for the "image template".



5. The RTML Editing

In the image template you should see red boxes on the right side of the Called templates. The RTML code that we are looking for under the first two red box and looks like the following.

TAG-WHEN tag STRING-APPEND



6. Modify the template to look like this

Before: yahoo_store_lightbox_Before.jpg After: yahoo_store_lightbox_After.jpg


7. Check the images to ensure they are working correctly before publishing your store.



I hope you have successfully added this feature to your Yahoo! store. I no longer practice this code and this is unmaintained tutorial. Use at your own risk. I worked hard on figuring out this code many years ago and didn't want these tutorials to go to waste.
 
Last edited:

Hot Links