Textpattern CMS

#13 2015-05-04 22:44:09

detail

Member

From: geez, I seem to be in NZ

Registered: 2010-07-13

Posts: 177

Website

Re: tweeking a jquery slideshow script to make responsive

GugUser wrote #290454:

What I’m asking is the HTML output that you can look as the source code in the browser.

Sorry, I’m somewhat confused here. This is what I copied out of the browser inspector in Chrome:

<div id="front_showcase" class="images" style="position: relative; overflow: hidden; border: none; width: 100%; height: auto; z-index: 1001;"> 

   <script type="text/javascript">
           $(function() { 
           $("#front_showcase").showcase
              ({
               css:       { width: "1080px", height: "500px" },
               animation: { type: "fade", interval: 5000, speed: 1200 },
               images: [
                          { url:"/images/195.jpg",
 . . .

But, as I have said, this does not actually show the image correctly as it comes up an image with a height of 0.

#14 2015-05-05 01:42:41

GugUser

Member

From: Quito (Ecuador)

Registered: 2007-12-16

Posts: 1,473

Re: tweeking a jquery slideshow script to make responsive

I looked the generated HTML code in one of your sites, www.cycletrailsaustralia.com, where you use the same script. The original and the generated code together are somthing like this:

<div id="front_showcase_1080" class="images" style="width: 1080px; height: 500px; overflow: hidden; position: relative; border: none; z-index: 1001;"> 

	<script type="text/javascript">
		$(function() { 
			$("#front_showcase_1080").showcase({
				css: { width: "1080px", height: "500px", },
				animation: { type: "fade", interval: 5000, speed: 1500 },
				images: [     
        			{	url:"/images/248.jpg",
						description: "Text"},
					(…)    
 				],
				(…)
			});
		});
	</script>

	<div id="slider" style="position: absolute;">
		<a href="#" target="_self" style="position: absolute; top: 0px; left: 0px; opacity: 1; z-index: 999;">
			<img src="/images/248.jpg" alt="Text" style="border: 0px;">
		</a>
		(…)
	</div>
	<div id="navigator" style="border: none; padding: 5px; margin: 5px; position: absolute; z-index: 1000; top: 0px; right: 0px; opacity: 1;">
		(…)
	</div>
	<div id="subBar" style="opacity: 0.6; width: 98%; overflow: hidden; z-index: 10002; position: absolute; bottom: 0px; color: rgb(102, 102, 51); background-color: rgb(255, 255, 255); height: 1.1em; padding: 4px; font-style: italic; font-weight: bold; font-size: 0.875em; margin: 0px 0.5%; left: 0px; right: 0px;">
		(…)
	</div>
</div>

I think you must change more details as I suggested at the beginning.

There are in the inicial script definitions for width and height for the #front_showcase_1080 container. Maybe you have to replace this too.

In your external CSS file exist some declarations for #front_showcase_1080 and #showcase_1080. Consider this too.

Thera are no declarations for the <img /> tag.

Last edited by GugUser (2015-05-05 11:40:40)

#15 2015-05-05 04:44:45

detail

Member

From: geez, I seem to be in NZ

Registered: 2010-07-13

Posts: 177

Website

Re: tweeking a jquery slideshow script to make responsive

GugUser wrote #290456:

I think you must change more details as I suggested in the beginning.

There are in the initial script definitions for width and height for the #front_showcase_1080 container. Maybe you have to replace this too.

In your external CSS file exist some declarations for #front_showcase_1080 and #showcase_1080. Consider this too.

I guess that fundamentally there’s no real reason why this can’t be made responsive,

There’s just that muddle of CSS, patched together over the last 5 years and now with a whole bundle of redundant crap in there, that I really need to tidy up, finally.

I did have a problem with the slideshow disappearing last year and it was resolved by removing a redundant width="100%", or it might have been max width="100%".

Thanks for taking the time to look at all that. Clearly I do have some work to do there.

I’m just not sure as to whether the js needs additional coding, a routine to check the screen width, then shrink the image down to suit the 768px width or whatever it is.