Post by TipTip » Sat Mar 10, 2012 3:25 am

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
Last edited by TipTip on Mon Mar 12, 2012 2:05 am, edited 1 time in total.

New member

Posts

Joined
Sat Feb 18, 2012 3:19 am

Post by florinsith » Sun Mar 11, 2012 3:26 pm

Edit the file catalog/view/theme/yourtheme/template/product/product.tpl and find the code:

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 } ?>
Replace it with:

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 } ?>
Edit catalog/view/theme/yourtheme/template/common/header.tpl and add the following 2 lines before the </head> tag

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>

Image
My Extensions - SuperTheme - Opencart templates - Opencart modules


User avatar
Expert Member

Posts

Joined
Fri May 14, 2010 2:36 am


Post by TipTip » Sun Mar 11, 2012 7:38 pm

florinsith wrote:Edit the file catalog/view/theme/yourtheme/template/product/product.tpl and find the code:

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 } ?>
Replace it with:

Code: 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 } ?>
Edit catalog/view/theme/yourtheme/template/common/header.tpl and add the following 2 lines before the </head> tag

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 :) .


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

New member

Posts

Joined
Sat Feb 18, 2012 3:19 am

Post by florinsith » Sun Mar 11, 2012 8:31 pm

maybe I forgot something, post a link to take a look.

Image
My Extensions - SuperTheme - Opencart templates - Opencart modules


User avatar
Expert Member

Posts

Joined
Fri May 14, 2010 2:36 am


Post by TipTip » Sun Mar 11, 2012 9:20 pm

Sent you a PM.

New member

Posts

Joined
Sat Feb 18, 2012 3:19 am

Post by florinsith » Sun Mar 11, 2012 9:59 pm

I forgot a line for the code from product.tpl , please review the code above.

Image
My Extensions - SuperTheme - Opencart templates - Opencart modules


User avatar
Expert Member

Posts

Joined
Fri May 14, 2010 2:36 am


Post by TipTip » Sun Mar 11, 2012 11:02 pm

Thanks, now I get:

"Parse error: syntax error, unexpected $end in /home/spiderla/public_html/catalog/view/theme/sportstore/template/product/product.tpl on line 491"

New member

Posts

Joined
Sat Feb 18, 2012 3:19 am

Post by TipTip » Mon Mar 12, 2012 2:04 am

Sorry, my mistake, it seems when I replaced the code, I cut more than what needed.

Now it is 100% operational as needed. Thanks a lot for your help.

Looking forward for my PM reply as soon as possible.

New member

Posts

Joined
Sat Feb 18, 2012 3:19 am

Post by BrickAlley » Thu Apr 05, 2012 2:03 am

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.
Image

New member

Posts

Joined
Sat Mar 12, 2011 8:17 am

Post by florinsith » Thu Apr 05, 2012 2:22 am

try it and see what happens.

Image
My Extensions - SuperTheme - Opencart templates - Opencart modules


User avatar
Expert Member

Posts

Joined
Fri May 14, 2010 2:36 am


Post by BrickAlley » Thu Apr 05, 2012 3:16 am

My Cart is using fancybox where the other guys cart is using colorbox

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 } ?>
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.

New member

Posts

Joined
Sat Mar 12, 2011 8:17 am

Post by florinsith » Thu Apr 05, 2012 3:48 am

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.

Image
My Extensions - SuperTheme - Opencart templates - Opencart modules


User avatar
Expert Member

Posts

Joined
Fri May 14, 2010 2:36 am


Post by BrickAlley » Thu Apr 05, 2012 10:42 am

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

New member

Posts

Joined
Sat Mar 12, 2011 8:17 am

Post by florinsith » Thu Apr 05, 2012 2:10 pm

the screenshot doesnt looks like it works.

Image
My Extensions - SuperTheme - Opencart templates - Opencart modules


User avatar
Expert Member

Posts

Joined
Fri May 14, 2010 2:36 am


Post by BrickAlley » Fri Apr 06, 2012 12:16 am

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

New member

Posts

Joined
Sat Mar 12, 2011 8:17 am

Post by fiona86 » Tue Aug 07, 2012 10:36 pm

Is there any way to increase the width for this jcarousel so that it could show more image at a time without overlapping to other thumbnails?

Newbie

Posts

Joined
Tue Feb 15, 2011 7:34 pm

Post by Vqz » Tue Jul 02, 2013 9:12 pm

any way to get it work on 1.5.4.1?

Vqz
Newbie

Posts

Joined
Sun Jan 10, 2010 12:02 am

Post by florinsith » Mon Jul 15, 2013 10:45 pm

The first written modification works on 1.5.4.1.

Image
My Extensions - SuperTheme - Opencart templates - Opencart modules


User avatar
Expert Member

Posts

Joined
Fri May 14, 2010 2:36 am


Post by labeshops » Wed Sep 25, 2013 1:53 am

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.

Running Opencart v3.0.3.2 with multi-stores from https://www.labeshops.com which has links to all my stores.

Image


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by labeshops » Wed Sep 25, 2013 1:55 am

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 :P

Running Opencart v3.0.3.2 with multi-stores from https://www.labeshops.com which has links to all my stores.

Image


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA
Who is online

Users browsing this forum: No registered users and 44 guests