Here is yet another jquery lightbox method to get your beautiful images to enlarge within the same page. The best thing about this script is that easy of moving on to the next image if you have secondary images installed in your Yahoo! Store. If you don’t there is a tutorial on here to show you how to do that was well!
This is only for the Yahoo! Store Editor V3.
You also must know how to edit RTML for this tutorial.
Ok, so the first this you are going to have to do is purchase the jquery “Lightbox Evolution” script from the CodeCanyon Market. I do not own the rights to this script to hand it out some grab it from the link below!
Purchase jQuery Lightbox Evolution By: aeroalquimia
Now that you have purchased your copy of the “jQuery Lightbox Evolution” script we will need to login to your Yahoo! Store. The first thing your are going to need to do is upload the files that you have just downloaded from the CodeCanyon Market. This could be done a lot easier if you are using an “FTP” program to upload your files.
Now that the files are uploaded to your site you will need to plugin the head tags to get the images to enlarge correctly.
Login into your store manager >> Store Editor >> Variables
You should have a text field that is called “Head-Tags”. Just copy and paste the code below into the text field but be sure to changed the URL in the script to your store URL.
|
|
<!-- Start Lightbox Evolution -->
<script type="text/javascript" src="http://site.YOURSTOREURL.com/lightbox/javascript/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://site.YOURSTOREURL.com/lightbox/javascript/lightbox/themes/default/jquery.lightbox.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="http://site.YOURSTOREURL.com/lightbox/javascript/lightbox/themes/default/jquery.lightbox.ie6.css" /><![endif]-->
<script type="text/javascript" src="http://site.YOURSTOREURL.com/lightbox/javascript/lightbox/jquery.lightbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.lightbox').lightbox({force: 'image'});
});
</script>
<!-- End Lightbox Evolution --> |
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”.
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
Before
After
I hope you have successfully added this feature to your Yahoo! store. If you have any question please feel free to ask in the comment section below.
...
View all articles by Adam