hello,
are there any alternatives such as lightbox, fancybox etc for opencart?
There's superbox... it's still jquery though. It allows you to use iframes and other external content as well.
I'm not sure if lightbox has already added this type of functionality already though.
I'm not sure if lightbox has already added this type of functionality already though.
http://www.alreadymade.com
Follow me on twitter.com/alreadymade
You say it like its a bad thing... it's still jquery though.
imaginetech has successfully implemented "Fancybox", which is another jquery-based alternative
http://demo2.imaginetech.com.au/index.p ... duct_id=48 (click the main image)
Hi Yegga,
Grab the fancybox package.
Extract and upload to your catalog/view/javascript/YOURFOLDER/ directory.
Open catalog/view/theme/YOURTHEME/template/common/layout.tpl and insert the following in the <head></head> tags:
Make sure to include the EASING script for the neat bouncing effect.
Open catalog/view/theme/YOURTHEME/template/product/product.tpl and add this to the bottom:
And finally, in product.tpl wherever you find the link tags surrounding the actual img tags change the id and insert the rel attribute as follows:
id="product_image" rel="product_image"
The id change will link fancybox to the image and the rel insert will group the main and additional images so that you can flip through them.
Hmmm, clear as mud? I think that makes sense, let me know if it doesn't.
Also, can I suggest one thing, don't remove thickbox, leave it there as I assume it's used in the add to cart animations and possibly other things.
Grab the fancybox package.
Extract and upload to your catalog/view/javascript/YOURFOLDER/ directory.
Open catalog/view/theme/YOURTHEME/template/common/layout.tpl and insert the following in the <head></head> tags:
Code: Select all
<script type="text/javascript" src="catalog/view/YOURFOLDER/jquery/jquery.fancybox/jquery.fancybox-1.2.1.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/YOURFOLDER/jquery.easing.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/YOURFOLDER/jquery.fancybox.css" />Open catalog/view/theme/YOURTHEME/template/product/product.tpl and add this to the bottom:
Code: Select all
<script type="text/javascript"><!--
$(document).ready(function() {
$("a#product_image").fancybox({
'overlayShow' : false,
'zoomSpeedIn' : 600,
'zoomSpeedOut' : 500,
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack'
});
});
//--></script>
id="product_image" rel="product_image"
The id change will link fancybox to the image and the rel insert will group the main and additional images so that you can flip through them.
Hmmm, clear as mud? I think that makes sense, let me know if it doesn't.
Also, can I suggest one thing, don't remove thickbox, leave it there as I assume it's used in the add to cart animations and possibly other things.
www.opencartstore.com
Get OpenCart Templates and OpenCart Modules.
Yeah you're right Qphoric, had my jquery and thickbox scrambled.
www.opencartstore.com
Get OpenCart Templates and OpenCart Modules.
what about the box that a lot of stores have now...mojozoom/jqzoom? where you see an image on the left, and then there's the zoom of it that shows up on the right on top of the product details. anyone know how to implement this?
I can't configure in 1.3.4, you could give me a idea, anybody 
Thank's...
Nevermind, i read fix.
Instead of using:
catalog\view\theme\YOURTHEME\template\common\LAYOUT.TPL
use
catalog\view\theme\YOURTHEME\template\common\HEADER.TPL
and in:
catalog\view\theme\YOURTHEME\template\product\PRODUCT.TPL
before BOTTOM insert:
still in "catalog\view\theme\YOURTHEME\template\product\PRODUCT.TPL"
look for:
class="thickbox" and changes for class="newimage" rel="newimage"
You can change the word "newimage" for another one.
Version of Fancybox, code/javascript and where to insert the codes have changed.
Thank you and please forgive my English, I'm from Brazil.
Thank's...Nevermind, i read fix.
Instead of using:
catalog\view\theme\YOURTHEME\template\common\LAYOUT.TPL
use
catalog\view\theme\YOURTHEME\template\common\HEADER.TPL
Code: Select all
<script type="text/javascript" src="catalog/view/javascript/jquery/NOMEDASUAPASTAFANCYBOX/jquery.fancybox-1.2.5.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/NOMEDASUAPASTAFANCYBOX/jquery.fancybox-1.2.5.pack.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/NOMEDASUAPASTAFANCYBOX/jquery.fancybox-1.2.5.css" media="screen"/>catalog\view\theme\YOURTHEME\template\product\PRODUCT.TPL
before BOTTOM insert:
Code: Select all
<script type="text/javascript">
$(document).ready(function() {
$("a.newimage").fancybox({
'zoomSpeedIn' : 500,
'zoomSpeedOut' : 500,
'overlayShow' : false
});
});
</script>look for:
class="thickbox" and changes for class="newimage" rel="newimage"
You can change the word "newimage" for another one.
Version of Fancybox, code/javascript and where to insert the codes have changed.
Thank you and please forgive my English, I'm from Brazil.
Yea, I added fancybox to one of my client's sites as well
also uses the "easing" option to make it bouncy
also uses the "easing" option to make it bouncy
Who is online
Users browsing this forum: No registered users and 18 guests
