The creation of this item image click to enlarge popup window requires three quick and easy steps:
Step 1) Create a raw-html page.
Once within the Yahoo Store editor click on the contents button located on the store editor toolbar. This will take you to your contents page, that lists all of the pages, items, links, etc. within your store (unless the page, item, etc. have been placed within the store editor clipboard.). On this contents page you will need to click on the new button, which will take you to a page where you may enter a name and type for the page you are creating. For this example, enter “view-image” for the name and select “raw-html” as the type, then press submit. You should be taken directly to the page you just created, on this page press the edit button and paste the following code into the html field, and press update.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <p align="center">
<small><a href="javascript:self.close();">Close Window</a></small>
<a href="javascript:self.close();">
<script type="text/javascript">
i = window.location.href.indexOf("?") + 1;
imgsrc = window.location.href.substring(i,255);
document.write(\'<img src="\' + imgsrc + \'" name="resizeMe">\');
</script>
</a>
<small><a href="javascript:self.close();">Close Window</a></small>
<script type="text/javascript">
function imgResize() {
if (document.resizeMe && document.resizeMe.complete) {
w = document.resizeMe.width + 55;
h = document.resizeMe.height + 150;
window.resizeTo(w, h);
}
}
</script> |
Step 2) Place JavaScript within the Head-tags field
After completing step 1, you will need to goto the store editor variables page by clicking on the variables button within the store editor toolbar. When the variables page has finished loading place the following code within the head-tags field and press the update button.
1
2
3
4
5
6
7
8
9
| <script type="text/javascript">
function popup(url) {
newwindow=window.open(url,\'name\',\'height=350,width=350,toolbar=no, \
location=no,directories=no,status=no,menubar=no, \
scrollbars=yes,resizable=yes\');
if (window.focus) {newwindow.focus()}
return false;
}
</script> |
Step 3) Edit the image RTML template
To edit the image RTML template click on the templates button within the store editor toolbar. Then, click on the “image.” template link located within the built-in templates column. Then, click on the copy template button and enter a new template id, for example: “popup-image” and then press the copy button. Now, use the store editor to replace this RTML code:
1
2
3
4
| TAG-WHEN tag STRING-APPEND
"a href=\""
IMAGE-REF image
"\"" |
With this RTML code:
1
2
3
4
| TAG-WHEN tag STRING-APPEND
"a href=javascript:popup('view-image.html?"
IMAGE-REF image
"')" |
If have followed all of the steps correctly, your item images should now open a popup window when clicked upon.