Post by arthur » Tue Dec 19, 2017 4:11 am

Hi there. This is about the default theme of v2.3x I use some custom code in product.tpl. Basically it's an additional gallery. If I click on image to enlarge it, it opens with navigation and allows to browse not only the current gallery but product images as well. How can I separate them? I tried to change all the names, ids and no desired result. There is no such attributes as data-toggle, group1, group2. How can I work it out on owl-carousel?
Last edited by arthur on Tue Dec 19, 2017 5:53 am, edited 1 time in total.

New member

Posts

Joined
Wed Oct 25, 2017 2:14 am

Post by straightlight » Tue Dec 19, 2017 4:57 am

No URL to the exact page or block of code has been provided in order to analyze the code.

Dedication and passion goes to those who are able to push and merge a project.

Regards,
Straightlight
Programmer / Opencart Tester


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON

Post by arthur » Tue Dec 19, 2017 5:51 am

straightlight wrote:
Tue Dec 19, 2017 4:57 am
No URL to the exact page or block of code has been provided in order to analyze the code.
It's just like a default gallery:

Code: Select all

 <ul class="thumbnails">
<li><a class="thumbnail" href="https://demo.opencart.com/image/cache/catalog/demo/macbook_1-500x500.jpg" title="MacBook"><img src="https://demo.opencart.com/image/cache/catalog/demo/macbook_1-228x228.jpg" title="MacBook" alt="MacBook"></a></li>
<li class="image-additional"><a class="thumbnail" href="https://demo.opencart.com/image/cache/catalog/demo/macbook_5-500x500.jpg" title="MacBook"> <img src="https://demo.opencart.com/image/cache/catalog/demo/macbook_5-74x74.jpg" title="MacBook" alt="MacBook"></a></li>
<li class="image-additional"><a class="thumbnail" href="https://demo.opencart.com/image/cache/catalog/demo/macbook_4-500x500.jpg" title="MacBook"> <img src="https://demo.opencart.com/image/cache/catalog/demo/macbook_4-74x74.jpg" title="MacBook" alt="MacBook"></a></li>
<li class="image-additional"><a class="thumbnail" href="https://demo.opencart.com/image/cache/catalog/demo/macbook_2-500x500.jpg" title="MacBook"> <img src="https://demo.opencart.com/image/cache/catalog/demo/macbook_2-74x74.jpg" title="MacBook" alt="MacBook"></a></li>
<li class="image-additional"><a class="thumbnail" href="https://demo.opencart.com/image/cache/catalog/demo/macbook_3-500x500.jpg" title="MacBook"> <img src="https://demo.opencart.com/image/cache/catalog/demo/macbook_3-74x74.jpg" title="MacBook" alt="MacBook"></a></li>
</ul>
My custom additional code in custom tab:

Code: Select all

<ul class="thumbnails_custom">
<li><a class="thumbnail_custom" href="https://demo.opencart.com/image/cache/catalog/demo/macbook_1-500x500.jpg" title="MacBook"><img src="https://demo.opencart.com/image/cache/catalog/demo/macbook_1-228x228.jpg" title="MacBook" alt="MacBook"></a></li>
<li class="thumbnail_custom"><a class="thumbnail" href="https://demo.opencart.com/image/cache/catalog/demo/macbook_5-500x500.jpg" title="MacBook"> <img src="https://demo.opencart.com/image/cache/catalog/demo/macbook_5-74x74.jpg" title="MacBook" alt="MacBook"></a></li>
</ul>

New member

Posts

Joined
Wed Oct 25, 2017 2:14 am

Post by straightlight » Tue Dec 19, 2017 5:54 am

demo.opencart.com? Really?

How about posting your original additional codes that you've added on the back-end in order to assist you or please post your URL to the exact page where you require assistance with your inquiry.

Dedication and passion goes to those who are able to push and merge a project.

Regards,
Straightlight
Programmer / Opencart Tester


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON

Post by arthur » Tue Dec 19, 2017 6:16 am

straightlight wrote:
Tue Dec 19, 2017 5:54 am
demo.opencart.com? Really?

How about posting your original additional codes that you've added on the back-end in order to assist you or please post your URL to the exact page where you require assistance with your inquiry.
Everything is the same. The original code is quite long, but only <li><a href...> are repeating. Everything is the same. Don't care about the links. They have nothing to do with that. I have my website on localhost. It's just a default theme with demo content.

Here's the thing. For example there are 4 regular images:

Code: Select all

<ul class="thumbnails">
<li class="image-additional"><a class="thumbnail">.....</a></li>
<li class="image-additional"><a class="thumbnail">.....</a></li>
<li class="image-additional"><a class="thumbnail">.....</a></li>
<li class="image-additional"><a class="thumbnail">.....</a></li>
</ul>
My custom code for two default images:

Code: Select all

<ul class="thumbnails[b]_custom[/b]">
<li class="image-additional"><a class="thumbnail_custom">.....</a></li>
<li class="image-additional"><a class="thumbnail_custom">.....</a></li>
</ul>
So I wish to see 4 images and 2 images in a separate gallery. Don't get me wrong - I see them as separate gallery as they are placed into different containers, but after I enlarge any image, then I see, for example,

Code: Select all

5 of 6
instead of

Code: Select all

1 of 2
. It's like having them in one gallery.

Hopefully it is clear enough what do I need. And yes, I'm using the same default code with only different paths in the links. I can use different classes, names whatever.. but it doesn't help here. In fancybox there is a possibility to specify a group for each gallery. Unfortunately, I have no clue about owl-carousel.

New member

Posts

Joined
Wed Oct 25, 2017 2:14 am

Post by arthur » Tue Dec 19, 2017 5:20 pm

Maybe I was wrong by saying OWL-CAROUSEL, because it ain't look like any carousel. It's not scrolling banners or something like that. There must be really simple way to do what I need as in lightbox, fancybox like rel="gallery1"...

New member

Posts

Joined
Wed Oct 25, 2017 2:14 am
Who is online

Users browsing this forum: No registered users and 180 guests