Adding jquery slideshow to solo theme

Shopify Partner
39 0 0

Hi.

I'm new to Shopify, but i've come to like the product and the community around it fast.

 

I'm trying to incorporate the jquery slideshow shown on this website; http://malsup.com/jquery/cycle/

It should be pretty easy to incorporate, but no matter what I do I always end up just getting 5 pictures instead of a slideshow. 

If anyone would be able to help me through implementing this slideshow in the Solo theme, it would be much appriciated. Just some general pointers would do aswell. 

Best regards 

Anders

CoverMe.dk - Design Laptop Covers
0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
5841 0 121

Things to check.

Are you quite sure you have included jQuery?

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
  </script>

Are you sure you have uploaded cycle to your assets and called it into your theme?

 

{{ 'js_jquery.cycle.all.2.72.js' | asset_url | script_tag }} 

Have you instantiated the script when the document loads?

 

<script type="text/javascript"> 
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
});
</script>

If you have doubled checked all of these as well as your mark-up you should be fine. If in doubt copy the mark-up and script call from the basic demo: http://malsup.com/jquery/cycle/basic.html

 

 

 

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
Shopify Partner
39 0 0

Hi Jamie.

Thanks alot for your help, I was calling the script wrong when the document loaded. Would probably have taking me forever to figure that out by my self, thanks for taking the time :)

It works now, my only problem now is getting it to display correctly.

The space between the slideshow and the footer seems to be very large for some reason, can't really figure out what's causing it.

Site is: http://coverme.myshopify.com/

Psw: madsen

Any suggestions is much appriciated :)

EDIT: I also noticed that it shows all the pictures before the script gets loaded, thinking this might be causing it. Thinking it should figure out how to hide them. Will work on it.

EDIT2: Thought a possible solution here: http://malsup.com/jquery/cycle/faq.html, didnt really work correctly for me though. It works by hiding all but the first image, which resultat in only the first image ever showed, after that it just fades into a non displayed image...I'm going to make sure my pictures are the same size, after that i'll try this http://shaneriley.com/cycle_faq_4/

CoverMe.dk - Design Laptop Covers
0 Likes
Highlighted
Shopify Partner
39 0 0

Got everything worked as intended. Anyone who runs into the same problems, feel free to contact me.

CoverMe.dk - Design Laptop Covers
0 Likes
New Member
1 0 0

Love how you incorporated jquery on your page CoverMe, can you please provide info on how to achieve that look?

Thank you in advance!

0 Likes
New Member
14 0 0

This is great! Using this for my shop with the Solo theme now.

All I did was swipe the demo code (http://malsup.com/jquery/cycle/basic.html) then replaced all the code in index.liquid between "<!-- START SHOWCASE -->" and "<!-- END SHOWCASE -->" with it. Now I'm modifying the variables (size, image URLs, etc) and relocating the dependencies linked back to malsup.com and it seems good so far.

I'm working on it right this minute but in a day or so you should see the final result here: http://www.getawedge.com/

0 Likes
New Member
2 0 0

I am trying to do the same.  I have a working cycle code that I am just trying to copy into my theme.

 

I've added these to my theme.liquid file:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript">  </script>

and


{{ 'jquery.cycle.min.js' | asset_url | script_tag }}

 

my question is where does the script to load go? In theme.liquid or in index.liquid?

Neither seemed to work for me.

This is my script code:

<script>
      $(document).ready(function() {

          $('#boxPromo').cycle({
              fx:     'blindX',
              speed:   1000,
              timeout: 6000,
              delay:  -4000
          });
      });
    </script>

0 Likes
New Member
2 0 0

I wanted to update this in case others have the same issue.  I was able to get this working as I described above.  I put the script code in the index.liquid file.  My problem was the version of cycle I was using.  I needed the one that had the 'blindx' fx in it (jquery.cycle.all.min.js). 

 

So for anyone trying to do this, the steps described above are all you really need.

 

0 Likes
New Member
3 0 0

CoverMe:

I'm stumped. First I duplicated (http://malsup.com/jquery/cycle/basic.html) on a remote server of mine and tested; all good.

Then uploaded the js scripts over to my Shopify theme assets and modified the links in theme.liquid to point to them (pasted below):

<!-- include jQuery library -->
{{ 'jquery.min.js' | asset_url | script_tag }}
<!-- include Cycle plugin -->
{{ 'jquery.cycle.all.latest.js' | asset_url | script_tag }}

The result I receive are the 5 CSS styled images.

Have peak @ the source code everything seems to be in tact to me..

http://www.largeyogamats.com/pages/frontpage

0 Likes
New Member
1 0 0

Could you please write step by step where to put these codes

0 Likes