Dear all,
I have about 9 images per product, and they all appear in triplets below each other, is there any jcarousel for the product images? or anything that wont let them appear all below each other on the product page?
I have opencar v 1.5.2.1
I have about 9 images per product, and they all appear in triplets below each other, is there any jcarousel for the product images? or anything that wont let them appear all below each other on the product page?
I have opencar v 1.5.2.1
Last edited by TipTip on Mon Mar 12, 2012 2:05 am, edited 1 time in total.
Edit the file catalog/view/theme/yourtheme/template/product/product.tpl and find the code:
Replace it with:
Edit catalog/view/theme/yourtheme/template/common/header.tpl and add the following 2 lines before the </head> tag
Code: Select all
<?php if ($images) { ?>
<div class="image-additional">
<?php foreach ($images as $image) { ?>
<a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>
<?php } ?>
</div>
<?php } ?>
Code: Select all
<?php if ($images) { ?>
<div class="image-additional">
<div id="carousel94">
<ul class="jcarousel-skin-opencart">
<?php foreach ($images as $image) { ?>
<li><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox"><img src="<?php echo $image['thumb']; ?>" width="51" height="51" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
<?php } ?>
</ul>
</div>
</div>
<script type="text/javascript"><!--
$('#carousel94 ul').jcarousel({
vertical: false,
visible: 3,
wrap: 'circular',
scroll: 3
});
//--></script>
<?php } ?>
Code: Select all
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/carousel.css" media="screen" />
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.jcarousel.min.js"></script>
Thanks a lot man. If we live in the same country then I would've treated you .florinsith wrote:Edit the file catalog/view/theme/yourtheme/template/product/product.tpl and find the code:
Replace it with:Code: Select all
<?php if ($images) { ?> <div class="image-additional"> <?php foreach ($images as $image) { ?> <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a> <?php } ?> </div> <?php } ?>
Edit catalog/view/theme/yourtheme/template/common/header.tpl and add the following 2 lines before the </head> tagCode: Select all
<div class="image-additional"> <div id="carousel94"> <ul class="jcarousel-skin-opencart"> <?php foreach ($images as $image) { ?> <li><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox"><img src="<?php echo $image['thumb']; ?>" width="51" height="51" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> </ul> </div> </div> <script type="text/javascript"><!-- $('#carousel94 ul').jcarousel({ vertical: false, visible: 3, wrap: 'circular', scroll: 3 }); //--></script> <?php } ?>
Code: Select all
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/carousel.css" media="screen" /> <script type="text/javascript" src="catalog/view/javascript/jquery/jquery.jcarousel.min.js"></script>
This works 100% with the latest opencart V1.5.2.1.
I only have one thing that changed, the Product Code, Reward Points, Availability, Price, quantity, Add to wish list, compare, reviews, write a review and share, all these came from to the right of the product images to below it.
Is there a way to return these back to their default position?
As for the pictures, they now look perfectly as I needed, so thanks a lot again for that help.
TipTip
I'd like to place my additional images into a small carousel also.
Will the code above work with 1.5.3.1 and if so is there any reason the carousel can't be turned vertically?
This could be a different version, but I'm hoping the vertical property will work with the code that's been discussed above.
This link has all the details.
http://sorgalla.com/projects/jcarousel/#Getting-Started
This is a screenshot of the vertical property discussed at the sorgalla.com link.
Will the code above work with 1.5.3.1 and if so is there any reason the carousel can't be turned vertically?
This could be a different version, but I'm hoping the vertical property will work with the code that's been discussed above.
This link has all the details.
http://sorgalla.com/projects/jcarousel/#Getting-Started
This is a screenshot of the vertical property discussed at the sorgalla.com link.
My Cart is using fancybox where the other guys cart is using colorbox
Is there a problem with just changing the 2 entries? I also need to mention that I'm using a theme. I need to be sure since my site is live. I'll PM you my link.
Code: Select all
<?php if ($images) { ?>
<div class="image-additional">
<?php foreach ($images as $image) { ?>
<a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="fancybox" rel="fancybox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>
<?php } ?>
</div>
<?php } ?>
no problem, just change the words colorbox to fancybox.If you manage to get it verticaly(shouldnt be any problems with that either) you will have to edit the stylesheet.css of your theme and change the image-aditional div width and position.
It's installed and I've gotten it vertically aligned, but I can't get things to cooperate size-wise.
After re-sizing the frame (65px x 310px), it shows up narrower and longer than the values I assigned. Part of the images are being covered up with the frame. If you click on a thumbnail it opens right up and works fine.
I'm thinking it might be a javascript issue that I don't understand.
http://puu.sh/nYwk
After re-sizing the frame (65px x 310px), it shows up narrower and longer than the values I assigned. Part of the images are being covered up with the frame. If you click on a thumbnail it opens right up and works fine.
I'm thinking it might be a javascript issue that I don't understand.
http://puu.sh/nYwk
I've got it working very well today.
The only thing left to figure out is how to place the up and down arrows at the top and bottom of the carousel. That was has me a little perplexed at the moment.
http://puu.sh/o2TY
The only thing left to figure out is how to place the up and down arrows at the top and bottom of the carousel. That was has me a little perplexed at the moment.
http://puu.sh/o2TY
I tried using this at http://www.mildtowildshoes.com/ana-bole ... r_name=ana but for some reason, it is autoscrolling and it's showing 7 additional images when this product only has 2 normally. (compare to http://www.gothicplus.com/ana-bolena-vi ... r_name=ana same product).
I'm using 1.5.2 so thought it would work...what am I missing?
Also is there any way to make this vertical? I'd ideally like it to scroll to the left of the main product image vertically. Some products I have 10 or more images for.
I'm using 1.5.2 so thought it would work...what am I missing?
Also is there any way to make this vertical? I'd ideally like it to scroll to the left of the main product image vertically. Some products I have 10 or more images for.
Running Opencart v3.0.3.2 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.
Okay, solved the duplicate and auto scrolling issue by changing the line scroll: 3 to scroll: 1
Still would like to make it vertical though and I have no idea how to do that
Still would like to make it vertical though and I have no idea how to do that
Running Opencart v3.0.3.2 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.
Who is online
Users browsing this forum: No registered users and 80 guests