Big Cartel - Slideshow Questions

Question

First a link to my site: http://johnathonpowers.bigcartel.com/

I have been playing around with the slideshow and was able to migrate it from the home page to a custom page. Initially had it on a test page, but thought it was cause a footer issue (due to too many items in footer perhaps) and it is temporarily on my About page.

So I moved this:

{% if theme.image_sets.slideshow.size > 0 %}
<div class="flexslider">
<ul class="slides">
  {% for image in theme.image_sets.slideshow %}
  <li><img src="{{ image.url }}"></li>
  {% endfor %}
</ul>
</div>
{% endif %} 

...from my home page to my about my page. When doing so the arrows no longer appear visible. I tried some code that is supposed to make them always appear, but still no luck.

This is what I added at the end of the CSS page. Did not help though.

.flex-direction-nav li a { 
 opacity: 1; 
 } 

Also is it possible for me to have this slideshow in my product pages? Or to have multiple slideshows throughout the site?

I know I am probably getting fairly advanced, but my ultimate goal was to have a slideshow for product images replacing the "list" of product images. When adding product images it throws them in one column to the right of the product page and I think a slideshow of sorts might look nicer.

Here is a page for an example...(see how the images are one after another). I cannot post more than two links. Please view the "Sleepless Bricks" not the framed page.

I actually was trying to figure out a way to have the image, then tiny images underneath (like at clothing websites or something) that you click on to change the image. A zoom function is also something I was reading about adding through something called jquery?

Ultimately I would like to do this on my product pages (a large image with thumbnails underneath): http://www.elevateweb.co.uk/image-zoom

Sorry this post went all over the place. Thanks for any help figuring out a solution to my product images and slideshows.

Answer 1

You can force those arrows to appear on a custom page by adding the following to Customize Design > Advanced > CSS, at the bottom:

#page_body .flex-direction-nav a {
  display: block;
}

And the Luna theme uses Flexslider for slideshow code, you shouldn't have any problems adding that to a product page or other built-in pages in your store. Flexslider supports multiple slideshows as well, so you may want to check out their documentation at https://github.com/woothemes/FlexSlider for information on how to do that.

As for the image zoom script, I've answered a question on that here: https://stackoverflow.com/a/22665701/2445073