Jump to content

Lightbox dosnt work from product description

maxa
 Share

Recommended Posts

maxa Newbie

maxa

Posted
Posted

I do put the following into the html-editor of tinymce for a product description

 

<a href="http://www.maxa.se/cms.php?id_cms=3" rel="lightbox"><img style="float: left;" src="http://www.maxa.se/bilder/varukorg.jpg" width="110" height="80" /></a>

 

But it only opens the link on _top. How do I do to make it open a popup (lightbox or similar) when clocking and hoovering the picture? I want the popup to display the text of a cms (or an html-file or another picture, whatever is easiest).

 

I have also tried:

<a onclick="window.open('http://www.maxa.se/cms.php?id_cms=3','','');return false;" href="http://www.maxa.se/cms.php?id_cms=3"><img style="float: left;" src="http://www.maxa.se/bilder/varukorg.jpg" width="110" height="80" /></a>

 

Could any one please help me how to make this work?

Regards

/Max

Link to comment
Share on other sites
maxa Newbie

maxa

Posted
  • Author
Posted

Thanks!

 

I did try it but couldnt get it working :/

 

I did insert the code

_____________________________________________________

<link rel="stylesheet" href="css/lightbox.css" type="text/css" />
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>

_____________________________________________________

 

 

 

into my templates header like this:

_____________________________________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
<head>
<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
<link rel="stylesheet" href="css/lightbox.css" type="text/css" />
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="generator" content="PrestaShop" />
<meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />
<link rel="icon" type="image/vnd.microsoft.icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />
<link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />
<script type="text/javascript">
 var baseDir = '{$content_dir}';
 var static_token = '{$static_token}';
 var token = '{$token}';
 var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
 var priceDisplayMethod = {$priceDisplay};
 var roundMode = {$roundMode};
</script>
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
{/foreach}
{/if}
{if isset($js_files)}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri}"></script>
{/foreach}
{/if}
{$HOOK_HEADER}
</head>
<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
<!--[if lt IE 7]><div style='clear:both;height:59px;padding:0 15px 0 15px;position:relative;z-index:10000;text-align:center;'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div><![endif]-->
{if !$content_only}
{if isset($restricted_country_mode) && $restricted_country_mode}<div id="restricted-country"><p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p></div>{/if}
<div id="wrapper1">
<div id="wrapper2">
<div id="wrapper3">
<div id="wrapper4">
<!-- Header -->
<div id="header">
 <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
  <img class="logo" src="{$img_ps_dir}logo.png?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" />
 </a>
 <div id="header_right">
  {$HOOK_TOP}
 </div>
</div>
<div id="columns">
<!-- Left -->
 <div id="left_column" class="column">{$HOOK_LEFT_COLUMN}</div>
<!-- Center -->
 <div id="center_column" class="center_column">
{/if}

_____________________________________________________

 

 

And then I used this in the tinymce box of the products description

_____________________________________________________

<a class="lbOn" href="../form.html">Email This</a>

_____________________________________________________

 

 

The files are placed like this:

form.html in PSroot/

prototype.js in PSroot/themes/mytheme/scripts/

lightbox.js in PSroot/themes/mytheme/scripts/

lightbox.css in PSroot/themes/mytheme/css/

 

I have also tried placing the js and css-files in root/scripts and root css

 

 

Can you please help me with some instructions to make this work?

Best regards

Max

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...