http://textpattern.com/ Textpattern Tips – Simple image slideshow using jQuery and native TXP tags Simple image slideshow using jQuery and native TXP tags - comments https://textpattern.tips/simple-image-slideshow-using-jquery-and-native-txp-tags Sat, 06 Oct 12 01:37:46 +0000 Comment on Simple image slideshow using jQuery and native TXP tags by Dylan 1 1 Mon, 01 Oct 12 14:58:28 +0000 I’m having problems with this. The images are not staying constrained to the box. I specified the dimensions of the box in the CSS, should I specify it elsewhere instead or in addition?

]]> I’m having problems with this. The images are not staying constrained to the box. I specified the dimensions of the box in the CSS, should I specify it elsewhere instead or in addition?

]]> Dylan Comment on Simple image slideshow using jQuery and native TXP tags by Jonathan Stubbs 1 1 Tue, 02 Oct 12 09:38:29 +0000 @Dylan, its hard to help you without an example of what you are currently working with in terms of HTML/CSS…

]]> @Dylan, its hard to help you without an example of what you are currently working with in terms of HTML/CSS…

]]> Jonathan Stubbs Comment on Simple image slideshow using jQuery and native TXP tags by Dylan 1 1 Tue, 02 Oct 12 17:20:49 +0000 Sure, sorry.

CSS—

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

.slideshow img { padding: 15px; 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>

Thank you. Help is very much appreciated.

]]> Sure, sorry.

CSS—

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

.slideshow img { padding: 15px; 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>

Thank you. Help is very much appreciated.

]]> Dylan Comment on Simple image slideshow using jQuery and native TXP tags by Jonathan Stubbs 1 1 Wed, 03 Oct 12 01:07:18 +0000 Dylan, it would be good to see an example URL if you have one to test couple things out, but from what I can see in the above, your padding of 15px and the border of 1px would be wider than the containing div.

You could try and change the padding to 2px for example and see what happens.

]]> Dylan, it would be good to see an example URL if you have one to test couple things out, but from what I can see in the above, your padding of 15px and the border of 1px would be wider than the containing div.

You could try and change the padding to 2px for example and see what happens.

]]> Jonathan Stubbs Comment on Simple image slideshow using jQuery and native TXP tags by Dylan 1 1 Fri, 05 Oct 12 14:02:51 +0000 Hi Jonathan,
I have addressed the issue you mentioned,— thank you. However, the problem is still happening— namely when the page is re-accessed by the same person (for example, if you were to visit the page, then click the logo to go “back” to the same page). I am seeing this in Mozilla, but have also seen it in Chrome.

This is the link: http://www.bournedesigns.info/textpatterntemp/
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; when they display incorrectly, each disparate size is present in the code.

]]> Hi Jonathan,
I have addressed the issue you mentioned,— thank you. However, the problem is still happening— namely when the page is re-accessed by the same person (for example, if you were to visit the page, then click the logo to go “back” to the same page). I am seeing this in Mozilla, but have also seen it in Chrome.

This is the link: http://www.bournedesigns.info/textpatterntemp/
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; when they display incorrectly, each disparate size is present in the code.

]]> Dylan Comment on Simple image slideshow using jQuery and native TXP tags by Jonathan Stubbs 1 1 Sat, 06 Oct 12 01:37:46 +0000 Your image #47 seems to break the layout. On first page load, the slideshow div has this style attached by Cycle:

<div class="slideshow" style="position: relative; ">

Sometimes (not all the time), on page reload after clicking the home logo, the layout breaks with image #47 and this is what Cycle produces:

<div class="slideshow" style="position: relative; width: 640px; height: 480px; ">

From what I can see, your image #47 is in fact 640×480 px, so this should break the layout as far as I remember from using cycle.

As Uli indicated on your forum post, please check first for errors in the loading of scripts, and I would start with the basic Cycle example first, make sure there are no errors with that and then add your own images.

But, I’m not 100% sure about the images being larger than their containers, I don’t remember how Cycle handles that (or not) so you may need to address that.

]]> Your image #47 seems to break the layout. On first page load, the slideshow div has this style attached by Cycle:

<div class="slideshow" style="position: relative; ">

Sometimes (not all the time), on page reload after clicking the home logo, the layout breaks with image #47 and this is what Cycle produces:

<div class="slideshow" style="position: relative; width: 640px; height: 480px; ">

From what I can see, your image #47 is in fact 640×480 px, so this should break the layout as far as I remember from using cycle.

As Uli indicated on your forum post, please check first for errors in the loading of scripts, and I would start with the basic Cycle example first, make sure there are no errors with that and then add your own images.

But, I’m not 100% sure about the images being larger than their containers, I don’t remember how Cycle handles that (or not) so you may need to address that.

]]> Jonathan Stubbs