My first mod for the community:
See demo:
[url]http://vikjavev.no/highslide/[/url]
Download:
[url]http://vikjavev.no/highslide/download.php[/url]
Copy all js files to folder:
/yourskin/customer/js/highslide/
Copy images to
/yourskin/customer/images/highslide/ (f.ex. zoomin.cur)
Copy css to
/yourskin/customer/css/highslide.css
/----------------START ---------------/
@charset “UTF-8”;
/* HighSlide Styles /
@media screen
{
.highslide {
cursor: url(…/images/highslide/zoomin.cur), pointer;
outline: none;
}
.highslide-active-anchor img {
visibility: hidden;
}
.highslide img {
/border: 2px solid gray;/
}
.highslide:hover img {
/border: 2px solid white;/
}
.highslide-wrapper {
background: white;
}
.highslide-image {
border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border: 2px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: white;
}
.highslide-loading {
display: block;
color: black;
font-size: 8pt;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
padding: 2px;
border: 1px solid black;
background-color: white;
padding-left: 22px;
background-image: url(…/images/highslide/loader.white.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
a.highslide-full-expand {
background: url(…/images/highslide/fullexpand.gif) no-repeat;
display: block;
margin: 0 10px 10px 0;
width: 34px;
height: 34px;
}
/ These must always be last /
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
}
/----------------END---------------/
[SIZE=“5”]Modification:[/SIZE]
[SIZE=“4”]index.tpl[/SIZE]
search for
{include file=“scripts/form_scripts.tpl”}
insert after:
{ highslide START *}
{if $content == “product_details” || $content == “products”}
[COLOR=“Red”]
[/COLOR]{/if}
{* highslide END }
[SIZE=“4”]common_templates/image.tpl[/SIZE]
search for:
{if $show_detailed_link && $images.detailed_id}
edit code:
{if $show_detailed_link && $images.detailed_id}
{ highslide START }
{ assign var=“detailed_href” value=“javascript:fn_open_popup_image(‘$image_location$image_index?object_type=detailed&image_id=$images.detailed_id&window=popup’, $images.detailed.image_x+84, $images.detailed.image_y + 140);” }
[COLOR=“red”]{if $settings.General.images_location == “database”}
{assign var=“detailed_href” value=“$image_index?object_type=detailed&image_id=$images.detailed_id”}
{else}
{assign var=“detailed_href” value=“$images.detailed.image_path”}
{/if}[/COLOR] { highslide END }
{/if}
search for:
{if $images.icon.image_type != ‘application/x-shockwave-flash’}
{if $detailed_href}
edit code:
{if $images.icon.image_type != ‘application/x-shockwave-flash’}
{if $detailed_href}
[COLOR=“Red”] { highslide START }
{ orig }
{ highslide END }[/COLOR]
{/if}
search for:
{if $show_detailed_link}
edit code:
{if $show_detailed_link}
{ highslide START }
[COLOR=“red”]
{
{$lang.view_larger_image} *}
[COLOR=“red”]
{$lang.view_larger_image}
{$product.product|strip_tags}
[/COLOR]
{* highslide END *}
[SIZE="4"]
classes/scripts/exception.js[/SIZE]
[B]search for:[/B]
if (pr_i[id][row]['detailed_id'] != '' && pr_i[id][row]['detailed_id'] != '0') {
[B]edit code:[/B]
if (pr_i[id][row]['detailed_id'] != '' && pr_i[id][row]['detailed_id'] != '0') {
//highslide START
//new_ref[id] = "javascript:fn_open_popup_image('"+current_location+'/'+image_index+"?object_type=detailed&image_id="+pr_i[id][row]['detailed_id']+"&window=popup', "+pr_i[id][row]['detailed']['image_x']+"+ 84, "+pr_i[id][row]['detailed']['image_y']+"+ 140);"
[COLOR="red"]new_ref[id] = ""+pr_i[id][row]['detailed_id2']+""[/COLOR]
//highslide END
[SIZE="4"]product_pages/product_options.tpl[/SIZE]
[B]search for:[/B]
pr_i[{$id}][{$smarty.foreach.ii.iteration}-1] = {$ldelim}
[B]edit code:[/B]
pr_i[{$id}][{$smarty.foreach.ii.iteration}-1] = {$ldelim}
'image_id': '{$imag.image_id}',
'detailed_id': '{$imag.detailed_id}',
[COLOR="red"]'detailed_id2': '{$imag.detailed.image_path}',[/COLOR]
'options': '{$imag.options}'
{$rdelim};
[B]Hint:[/B]
If path to images are wrong, only a "loading box will appear...
