[Solved] Thickbox not working in my theme

jd.creative · May 7, 2013

Okay, so I'm currently making my own theme on Prestashop 1.5.x

I've just started doing the product page.

The problem is, when you click the full image, nothing happens, when you click the 'maximize' text, nothing happens, and when you click the thumbnails, it loads the actual image page. (i.e www.mypresta.co.uk/flutterbye/38-thickbox_default/product-image.jpg

(www.mypresta.co.uk is not the actual URL of my website, I've just replaced my actual website URL with it).

You'll see in my rendered source, that I have changed a lot, but the error was occurring even when I was using the product.tpl and product.css from the default theme... which leads me to think it could be something in header.tpl, but I don't know what.

Anyway, here's my rendered source code:

<html><head>
<title>16-04-13 Teapots - Flutterbye</title>
<meta name="description" content="This is a short description!">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8">
<meta http-equiv="content-language" content="en">
<meta name="robots" content="index,follow">
<link rel="icon" type="image/vnd.microsoft.icon" href="/flutterbye/img/favicon.ico?1367927429">
<link rel="shortcut icon" type="image/x-icon" href="/flutterbye/img/favicon.ico?1367927429">
<script type="text/javascript">
 var baseDir = 'http://www.mypresta.co.uk/flutterbye/';
 var baseUri = 'http://www.mypresta.co.uk/flutterbye/';
 var static_token = '[sET, JUST REMOVED FOR POSTING ON FORUM]';
 var token = '[sET, JUST REMOVED FOR POSTING ON FORUM]';
 var priceDisplayPrecision = 2;
 var priceDisplayMethod = 0;
 var roundMode = 2;
</script>
  <link rel="stylesheet" type="text/css" href="/flutterbye/themes/flutterbye/css/global.css">
  <link rel="stylesheet" type="text/css" href="/flutterbye/themes/flutterbye/css/product.css">
  <link rel="stylesheet" type="text/css" href="/flutterbye/js/jquery/plugins/fancybox/jquery.fancybox.css">
  <link rel="stylesheet" type="text/css" href="/flutterbye/themes/flutterbye/css/modules/blockuserinfo/blockuserinfo.css">
  <link rel="stylesheet" type="text/css" href="/flutterbye/modules/blockspecials/blockspecials.css">
  <link rel="stylesheet" type="text/css" href="/flutterbye/modules/blocknewproducts/blocknewproducts.css">
  <link rel="stylesheet" type="text/css" href="/flutterbye/modules/favoriteproducts/favoriteproducts.css">
  <link rel="stylesheet" type="text/css" href="/flutterbye/modules/homefeatured/homefeatured.css">
  <link rel="stylesheet" type="text/css" href="/flutterbye/themes/flutterbye/css/modules/blockcart/blockcart.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:300,400">
 <script type="text/javascript" src="/flutterbye/js/jquery/jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="/flutterbye/js/jquery/plugins/jquery.easing.js"></script>
 <script type="text/javascript" src="/flutterbye/js/tools.js"></script>
 <script type="text/javascript" src="/flutterbye/js/jquery/plugins/fancybox/jquery.fancybox.js"></script>
 <script type="text/javascript" src="/flutterbye/js/jquery/plugins/jquery.idTabs.js"></script>
 <script type="text/javascript" src="/flutterbye/js/jquery/plugins/jquery.scrollTo.js"></script>
 <script type="text/javascript" src="/flutterbye/js/jquery/plugins/jquery.serialScroll.js"></script>
 <script type="text/javascript" src="/flutterbye/modules/favoriteproducts/favoriteproducts.js"></script>
 <script type="text/javascript" src="/flutterbye/themes/flutterbye/js/modules/blockcart/ajax-cart.js"></script>

<script type="text/javascript">
var favorite_products_url_add = 'http://www.mypresta.co.uk/flutterbye/module/favoriteproducts/actions?process=add';
var favorite_products_url_remove = 'http://www.mypresta.co.uk/flutterbye/module/favoriteproducts/actions?process=remove';
var favorite_products_id_product = '19';

</script>

</head>
<body>
<div id="mainwrap">
<div id="header">
<a href="http://www.mypresta.co.uk/flutterbye/" title="Flutterbye" id="fltop_logo">
 <img class="logo" src="/flutterbye/img/logo-1.jpg?1367927429" alt="Flutterbye">
</a>
<div id="fltop_menu">
 <ul>
  <li><a href="http://www.mypresta.co.uk/flutterbye/content/6-about"><span style="font-size:1.6em;">About</span><br>the designer</a></li>
  <li><a href="http://www.mypresta.co.uk/flutterbye/"><span style="font-size:1.6em;">Shop</span><br>for jewellery</a></li>
  <li><a href="http://www.mypresta.co.uk/flutterbye/content/7-read"><span style="font-size:1.6em;">Read</span><br>legal docs</a></li>
 </ul>
</div>
<!-- Block login cart module HEADER -->
<div id="blc_login_cart">
<div id="blc_login">
 <p>Welcome
 Guest.</p>
  <p><a href="http://www.mypresta.co.uk/flutterbye/my-account" title="Login to your customer account" class="login" rel="nofollow">Login</a> | <a href="http://www.mypresta.co.uk/flutterbye/my-account" title="Register a new account" class="login" rel="nofollow">Register</a></p>
  </div>
<ul id="blc_cart">
<li id="shopping_cart">
  <a href="http://www.mypresta.co.uk/flutterbye/order" title="View my shopping cart" rel="nofollow">Cart
  <span class="ajax_cart_quantity">1</span>
  <span class="ajax_cart_product_txt" style="">Product</span>
  <span class="ajax_cart_product_txt_s hidden" style="display: none;">Products</span>
  <span class="ajax_cart_total">£15.00</span>
  <span class="ajax_cart_no_product hidden" style="display: none;">(empty)</span>
  </a>
 </li>
  </ul>
</div>
<!-- /Block user information module HEADER -->


<script type="text/javascript">
var CUSTOMIZE_TEXTFIELD = 1;
var img_dir = 'http://www.mypresta.co.uk/flutterbye/themes/flutterbye/img/';
</script>
<script type="text/javascript">
var customizationIdMessage = 'Customization #';
var removingLinkText = 'remove this product from my cart';
var freeShippingTranslation = 'Free shipping!';
var freeProductTranslation = 'Free!';
var delete_txt = 'Delete';
</script>

<!-- MODULE Block cart -->
<div id="cart_block" class="block exclusive">
<p class="title_block">
 <a href="http://www.mypresta.co.uk/flutterbye/order" title="View my shopping cart" rel="nofollow">Cart
<span id="block_cart_expand" class="hidden"> </span>
 <span id="block_cart_collapse"> </span>
 </a>
</p>
<div class="block_content">
<!-- block summary -->
<div id="cart_block_summary" class="collapsed">
 <span class="ajax_cart_quantity" style="">1</span>
 <span class="ajax_cart_product_txt_s" style="display: none;">products</span>
 <span class="ajax_cart_product_txt" style="">product</span>
 <span class="ajax_cart_total" style="">£15.00</span>
 <span class="ajax_cart_no_product" style="display: none;">(empty)</span>
</div>
<!-- block list of products -->
<div id="cart_block_list" class="expanded">
  <dl class="products">
	   <dt id="cart_block_product_17_0_0" class="first_item last_item">
<span class="quantity-formated"><span class="quantity">1</span>x</span>
<a class="cart_block_product_name" href="http://www.mypresta.co.uk/flutterbye/necklaces/17-22-02-13-spring-blues.html" title="22-02-13 Spring Blues">
22-02-13...</a>
<span class="remove_link"><a class="ajax_cart_block_remove_link" rel="nofollow" href="http://www.mypresta.co.uk/flutterbye/?controller=cart&delete=1&id_product=17&ipa=0&token=40dfe63d08bda2b37657bdf96910b982"> </a></span>
<span class="price">
	   £15.00		 </span>
  </dt>

  <!-- Customizable datas -->


</dl>
  <p class="cart_block_no_products hidden" id="cart_block_no_products">No products</p>

 <p id="cart-prices">
  <span id="cart_block_shipping_cost" class="price ajax_cart_shipping_cost">£1.60</span>
  <span>Shipping</span>
  <br>
	 <span id="cart_block_total" class="price ajax_block_cart_total">£16.60</span>
  <span>Total</span>
 </p>
<p id="cart-buttons">
  <a href="http://www.mypresta.co.uk/flutterbye/order" class="button_small" title="View my shopping cart" rel="nofollow">Cart</a>   <a href="http://www.mypresta.co.uk/flutterbye/order" id="button_order_cart" class="exclusive" title="Check out" rel="nofollow"><span></span>Check out</a>
 </p>
</div>
</div>
</div>
<!-- /MODULE Block cart -->

</div>
</div>
<div id="flleft_col">
<!-- Block categories module -->
<div id="categories_block_left" class="block">
<span>Shop For:</span>
 <ul class="tree ">

<li>
<a href="http://www.mypresta.co.uk/flutterbye/11-all" class="selected" title="">All</a>
</li>

<li>
<a href="http://www.mypresta.co.uk/flutterbye/6-necklaces" title="">Necklaces</a>
</li>

<li>
<a href="http://www.mypresta.co.uk/flutterbye/8-earrings" title="">Earrings</a>
</li>

<li>
<a href="http://www.mypresta.co.uk/flutterbye/7-bracelets" title="">Bracelets</a>
</li>

<li class="last">
<a href="http://www.mypresta.co.uk/flutterbye/12-other" title="">Other</a>
</li>
   </ul>

 <script type="text/javascript">
 // <![CDATA[
  // we hide the tree only if JavaScript is activated
  $('div#categories_block_left ul.dhtml').hide();
 // ]]>
 </script>
<form id="searchbox" action="http://www.mypresta.co.uk/flutterbye/search" method="get">
 <p>
 <input type="hidden" name="controller" value="search">
 <input type="text" name="search_query" value="">
 <input type="hidden" value="position" name="orderby">
 <input type="hidden" value="desc" name="orderway">
 </p>
</form>
</div>
<!-- /Block categories module -->
</div>
<div id="mainwrap">
<div id="fl_product_container">
<div id="fl_product_left">
 <!-- product img-->
 <div id="image-block">
 <span id="view_full_size">
<img src="http://www.mypresta.co.uk/flutterbye/38-large_default/16-04-13-teapots.jpg" title="16-04-13 Teapots" alt="16-04-13 Teapots" id="bigpic">
<span class="span_link">Maximize</span>
  </span>
</div>
<!-- thumbnails -->
 <div id="views_block" class="clearfix ">
<div id="thumbs_list">
  <ul id="thumbs_list_frame">
			   <li id="thumbnail_38">
  <a href="http://www.mypresta.co.uk/flutterbye/38-thickbox_default/16-04-13-teapots.jpg" rel="other-views" class="thickbox shown" title="">
   <img id="thumb_38" src="http://www.mypresta.co.uk/flutterbye/38-medium_default/16-04-13-teapots.jpg" alt="" height="58" width="58">
  </a>
 </li>
		   <li id="thumbnail_39">
  <a href="http://www.mypresta.co.uk/flutterbye/39-thickbox_default/16-04-13-teapots.jpg" rel="other-views" class="thickbox " title="">
   <img id="thumb_39" src="http://www.mypresta.co.uk/flutterbye/39-medium_default/16-04-13-teapots.jpg" alt="" height="58" width="58">
  </a>
 </li>
		</ul>
 </div>
</div>
<p class="resetimg clear"><span id="wrapResetImages" style="display: none;"><img src="http://www.mypresta.co.uk/flutterbye/themes/flutterbye/img/icon/cancel_11x13.gif" alt="Cancel" width="11" height="13"> <a id="resetImages" href="http://www.mypresta.co.uk/flutterbye/bracelets/19-16-04-13-teapots.html" onclick="$('span#wrapResetImages').hide('slow');return (false);">Display all pictures</a></span></p></div>
<div id="fl_product_center">
<!--TITLE-->
<h1 class="fl_product_title">16-04-13 Teapots</h1>
<!--LONG DESCRIPTION-->
<!-- full description -->
<div class="fl_product_desc"><p><span>This is a loooooooong description for the main product page!</span></p></div>
<!--PRICE & ADD TO BASKET (OR SOLD OUT)-->
<!-- add to cart form-->
 <form id="buy_block" action="http://www.mypresta.co.uk/flutterbye/cart" method="post">
  <!-- hidden datas -->
  <p class="hidden">
<input type="hidden" name="token" value="40dfe63d08bda2b37657bdf96910b982">
<input type="hidden" name="id_product" value="19" id="product_page_product_id">
<input type="hidden" name="add" value="1">
<input type="hidden" name="id_product_attribute" id="idCombination" value="">
  </p>
<div class="content_prices clearfix">
  <!-- prices -->


  <div class="price">

<p class="our_price_display">
	 </p><h1 id="our_price_display">£10.00</h1>
 <!--	  tax incl.	 -->
	<p></p>
	   </div>
  <p id="reduction_percent" style="display:none;"><span id="reduction_percent_display"></span></p>
  <p id="reduction_amount" style="display:none">
<span id="reduction_amount_display">
	</span>
  </p>

	  <h3 id="add_to_cart" class="buttons_bottom_block">
 <span></span>
 <input type="submit" name="Submit" value="Add to cart" class="exclusive">
</h3>
	</div>
 </form>

<h5>SHARE ICONS GO HERE</h5>
</div>
<div id="fl_product_right">
<!--POSTAGE & PACKAGING + INFOS-->
<h1>Postage</h1>
<p>Some info about the postage</p>
<h1>Packaging</h1>
<p>Some info about the packaging</p>
</div>
</div><!-- end product container -->
<div id="flfoot">
<p>© Copyright 2013</p>
</div>
</div>

Thanks for your help

Edited May 9, 2013 by jd.creative (see edit history)

jd.creative · May 9, 2013

Studying the code I posted, I noticed product.js wasn't loading, turned out I had accidentally deleted it.

Let this be a lesson to all

prestanewbie21 · August 27, 2013

Hi jd.creative,

I have the same issue maybe I've done the same thing but I upload the product.js but I don't know if it was in the theme or prestashop.

face4u · December 5, 2013

Hello,

I have the same problem, thought my file product.js is on air...

Any idea what could that be?

The website: www.israeli-art.org

Specific page:http://www.israeli-art.org/shop/gold-9k-and-silver-925/16-3d-star-of-david-with-opal-or-onyx.html

Dampers · December 12, 2013

Hi There,

I've had the same problem aswell. I tried to narrow it down using the CCC settings and for me it was the combined CSS..

It could be a CSS problem for you aswell.

Hope it's helpfull!

face4u · December 12, 2013

Thank you for the reply...

Actually I solved the problem... It was another free module (contact form) that the installation caused interference and so the file product.js was ignored for some reason... uninstalling the free form module solved my problem...

Have a great weekend...

Shulamit

Dampers · December 12, 2013

Hi Shulamit,

Thank you for your reply,

I'll check my modules aswell, thanks for the input!

Have a great weekend too.

Jasper

Sign In

[Solved] Thickbox not working in my theme

Recommended Posts

jd.creative

Link to comment

Share on other sites

jd.creative

Link to comment

Share on other sites

prestanewbie21

Link to comment

Share on other sites

face4u

Link to comment

Share on other sites

Dampers

Link to comment

Share on other sites

face4u

Link to comment

Share on other sites

Dampers

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com