tweeking a jquery slideshow script to make responsive

detail · 2015-05-04 05:24:09

I’m still on the quest to get a couple of my websites fully 100% responsive. They have a big image slideshow at the top of the pages.

I have used adi_if_mobile to show a single scaleable image for a mobile device rather than a slideshow and that is all working fabbo for all screens up to 450px.

The desktop version uses a jquery slideshow dating from 2010 that is no longer being developed. It is beautifully unintrusive, does everything I want, automatic start, can stop it, captions only visible on hover, etc.

Except it is not responsive. It will only show each slide at the original size, 1080 × 500px. That’s OK for a 1280px+ screen, but the image has the overflow hidden on an intermediate sized screen.

I’m wondering if there is any way I can simply change the .js script to make the slideshow fully responsive, so that it can accept a 100% sizing to the container rather than a fixed px sizing as it is now.

I’ve searched in the script for the particulars to change;

     // Setup of container
        $container.css(opt.css);

        // Check loading mode.
        // If there's something in opt.images[], I'll load them asynchronously, 
        // it will be nice to have width and height settled, in order to define the $container sizes
        if (opt.images.length != 0) {
            $container.css({ width: opt.css.width, height: opt.css.height, overflow: "hidden" });
            . . .

Then a bit further down is this:

// This will start all showcase's stuffs
    $.fn.showcase.start = function($container, opt) {
        // Define local vars
        var index = 0;                             
        var nImages = $container.find("img").length;
        var $fi = $container.find("img:first");
        var imagesize = { width: $fi.removeAttr("width").width(), height: $fi.removeAttr("height").height() };

		opt.css.width = imagesize.width;
		opt.css.height = imagesize.height;

        // Redefine size of container
        $container.css({ width: opt.css.width, height: opt.css.height });
		$container.find("a").css({ position: "absolute", top: "0", left: "0" })
                  .find("img").css("border", "0px");

Maybe this is really quite simple to achieve. The slideshow is old enough to work on jQuery 1.3.x, I have it on 1.10.1.

I’d appreciate some help on this one.

Graeme

Last edited by detail (2015-05-04 05:26:32)

GugUser · 2015-05-04 13:53:43

What about this little change (or exists a separate CSS file)?

		opt.css.width = "100%";
		opt.css.height = "auto";

detail · 2015-05-04 20:07:36

GugUser wrote #290421:

What about this little change (or exists a separate CSS file)?

opt.css.width = "100%";...

Thanks for that.

Be great if it was so easy.

I’ve tested this change and sadly no image is shown.

The image is loaded, you can see it pop up momentarily, and it is listed when you view the code source,

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

It seems that for some reason it is coming up as 1080 × 0px instead of 1080 × 500px.

GugUser · 2015-05-04 20:20:02

What you show in your code example is the container. What about the image?

detail · 2015-05-04 20:28:32

GugUser wrote #290444:

What you show in your code example is the container. What about the image?

This is the stuff that loads. I have tried various modifications on the width and height here to get a responsive image.

        $("#front_showcase").showcase
              ({
               css:       { width: "1080px", height: "500px" },
               animation: { type: "fade", interval: 5000, speed: 1200 },

GugUser · 2015-05-04 20:41:43

I mean what is the output in the HTML, inside the #front_showcase container?

detail · 2015-05-04 20:52:04

GugUser wrote #290448:

I mean what is the output in the HTML, inside the #front_showcase container?

This is what I see

<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",
 . . .

Hope that is what you are looking for . . .

GugUser · 2015-05-04 21:17:04

There is no <img /> tag? It’s a slider or a image in a new layer? But after all the CSS seems to be correct:

css: {width: "1080px", height: "500px"}.

Last edited by GugUser (2015-05-04 21:39:01)

detail · 2015-05-04 21:32:56

GugUser wrote #290450:

There is no <img /> tag? It’s a slider or a image in a new layer? But after all the CSS seems to be correct:

css: {width: “1080px”, height: “500px”}….@

Sorry, I should have been more specific: this is what the browser is telling me it is reading.

The image is definitely loading, I can see the caption, the problem is that while the image has the correct width, 1080px, it has a height of 0px, which means you don’t see it. The “auto” is coming up as 0px.

So just to go back:

The slideshow works with the original code, but any image is not responsive.

so I’ve changed to this code:

opt.css.width = "100%";
opt.css.height = "auto";

And the image is the correct width in the browser, just the height = 0. That means you can’t see it.

GugUser · 2015-05-04 21:40:38

Yes, I understand. But what shows the HTML source code? No <img /> tag?

detail · 2015-05-04 21:58:13

There’s a variety of ways the slide show is started on my sites, but the simplest case, the one I’m testing, is this:

<div id="front_showcase" class="images" > 

 <txp:adi_if_mobile>

  <txp:thumbnail id="195" class="align-center" />

<txp:else />

           <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",

GugUser · 2015-05-04 22:28:00

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

detail · 2015-05-04 22:44:09

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.

GugUser · 2015-05-05 01:42:41

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)

detail · 2015-05-05 04:44:45

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.

Textpattern CMS

Textpattern CMS support forum

#1 2015-05-04 05:24:09