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.

Textpattern CMS

Textpattern CMS support forum

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