Creating a slideshow with jQuery, and frustration

dylan-c · 2012-10-05 21:50:21

Hi,
This forum has been great for helping me as I learn, and I’m so grateful to the helpful people here.

I am currently really stuck, trying to get a working slideshow going. I am using the jQuery javascript library, the Cycle plugin, and Textpattern tags.

I have something set up using this method from TXP Tips

and am asking for help there as well— hopefully someone will spot what is wrong.

But the result has been far from satisfactory thus far. The images are not ALWAYS being resized to fit in the div. Sometimes they are, and sometimes they are not. I specified the dimensions of the box in the CSS.

You may see it display properly upon viewing it; in which case, refresh, click the logo, or click the home link in the top of the right hand sidebar; these actions usually produce the erroneous display.

This is the link to the site

/*————— Slideshow Styling —————*/

.slideshow {  
    height:  310px;  
    width:   410px;  
    padding: 0;  
    margin:  0;  
} 

.slideshow img {  
    padding: 2px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  400px; 
    height: 300px; 
    top:  0; 
    left:0; 
}

HTML

<txp:article><txp:if_custom_field name=“images_category”>
<div class=“slideshow”>
<txp:images category=’<txp:custom_field name=“images_category” />’ break=”“>
<txp:image />
</txp:images>
</div>
</txp:if_custom_field>
</txp:article>

This is the link

No one reports seeing this on the FIRST time the page is accessed— only on subsequent viewings, such as by clicking the logo or the “Home” link on the right hand side, or refreshing. It may not happen every time.

When the images are loading in the correct size, each image displays a size of nearly 300 × 400 in the html inspector; when they display incorrectly, each disparate size is present in the code. I can’t determine what causes it to display correctly only sometimes!

I am open to a better plugin or solution for a slideshow, or suggestions for what I might fix with this one.

Thank you.

{Edited to add bc.. for better code display. – Uli}

Last edited by uli (2012-10-05 22:34:31)

uli · 2012-10-05 22:27:36

There are several potential problems that could cause your issue (or other ones), get rid of these and try again:

cycle plugin loaded twice (throw out the malsup one, link to your own instead!)
jquery loaded thrice
head tag closed twice

BTW, the code posted above seems not to stem from your website, it is Textilized (see curly quotes), so it’s apparently copied from somewhere else. Should the above not be sufficient, please post only authentic code.

Last edited by uli (2012-10-05 22:37:29)

uli · 2012-10-06 02:24:33

Alright, that wasn’t sufficient, apparently. Try setting containerResize to 0 in the cycle file, at the moment it’s set to 1. Sounds like it could be involved :) because in these cases when the images are not scaled, there’s always the largest image’s measures entered in the styles of div.slideshow. Edit: There’s also the fit parameter you could try to set to 1.

I remarked how endless the cycle file is while looking for the preferences. I think I remember there’s also a smaller version available of the Cycle plugin (I don’t mean a minified one), good enough for these reduced effects like fading. Does it also resize? Hm.

Last edited by uli (2012-10-06 02:26:16)

jstubbs · 2012-10-06 02:41:08

I also commented on TXP Tips where you posted about this problem. As Uli says, you should check first for errors with the script loading, then I’d start with the basic example of Cycle and then add your own images later.

Image #47 breaks the layout and Uli has indicated above a possible solution to the container resizing.

The smaller version of Cycle is called Cycle Lite. I think it only handles fades.

dylan-c · 2012-10-06 18:51:58

OK- I followed your instructions and I believe the problem is now fixed.

I set containerResize to 0, and the fit parameter to 1. This was not sufficient until I specified both the width and the height. Now I have consistent display and no resizing. Great!

Thanks again to you both.

Last edited by dylan-c (2012-10-06 19:53:55)

uli · 2012-10-06 19:36:45

You’re welcome! Couldn’t break it, cool.

I’m here for learning, and one thing that remains unclear is the different behaviour on first loading and subsequent passes. Could you find a reason for that?

jstubbs · 2012-10-07 01:09:38

From what I saw, on first pass image #47 (the largest image) was being sized at 400×300 px and on reload (not always) was being sized at its actual dimension of 640×480 px. Might be worth checking with the author of the script, but for sure its good practice to use fixed image sizes.

Happy you got it working!

Textpattern CMS

Textpattern CMS support forum

#1 2012-10-05 21:50:21

Creating a slideshow with jQuery, and frustration

#2 2012-10-05 22:27:36

Re: Creating a slideshow with jQuery, and frustration

#3 2012-10-06 02:24:33

Re: Creating a slideshow with jQuery, and frustration

#4 2012-10-06 02:41:08

Re: Creating a slideshow with jQuery, and frustration

#5 2012-10-06 18:51:58

Re: Creating a slideshow with jQuery, and frustration

#6 2012-10-06 19:36:45

Re: Creating a slideshow with jQuery, and frustration

#7 2012-10-07 01:09:38

Re: Creating a slideshow with jQuery, and frustration

Board footer