andygott / really-simple-slideshow Goto Github PK

In IE8 the fade effect during transitions between slides is broken – fade transitions always appear as if the effect option were set to 'none'. Slide effects work. Currently working on a fix for this.

Hi, when u generate slides from js, caption is div. If you use the link for image, caption's div is covered by the anchor and not working correctly. Use span instead of div please. (line 463)

Hi,

I have reduced border to 0. If I add a http link to a picture, I get a thin line arround it.
In http this is < img src="s/r1.jpg" border="0" / >
Where can I add comething like border ="0"?

BR,
Vito

Thanks for a great plugin. Is it possible to set a fixed size for the images.

The first image ok but i can't control the slides with css.

Thanks.

12.0.742.91 on Mac.

I love this slideshow because of the way it loads images individually. Very smart. The issue I have is that the .rs-control div with the previous and next arrows don't show up in IE7. when I view source in any browser, I cannot see div.rs-control in the html. I can see it in Webkit inspector, but not in IE developer tools.Not sure how this works, as I suck at javascript.

Has anyone else had a similar issue? My development site is using the latest build of html5 boilerplate.

thanks in advance.
Michael

I am trying to change the display interval from the default (5 seconds) to another interval time (ie, 8 seconds).

I put the basic jQuery code into simpledemo.html (see code at http://www.pm26.com/misc/simpledemo.html and http://www.pm26.com/misc/simpledemo.txt) that was described in the Really Simple Slideshow manual. However, the interval stays at the default 5 seconds.

Please can somebody help me.

Thanks in advance.

Hi im using your slideshow for a full display slide show and im wondering, if you considered to scale pictures, so that width and height are proportionally set...

Thanks a lot
Doca

It would awesome if there was a setting to pause the slideshow when you hover over the slide.

Immediately after

                                var whenDimensions = function(width, height) {

Add this block:

                if (data.settings.fit === true)
                {
                    var ratio = Math.min(containerWidth/width, containerHeight/height);
                    width = Math.ceil(ratio * width);
                    height = Math.ceil(ratio * height);
                    $img.css({width: width});
                    $img.css({height: height});
                }

Hi! Thanks for sharing such a great plugin.

I’m using one slideshow stage to load selected slideshows upon request. That is, when the user clicks a certain link, I’d like to load a separate set of slides into the slideshow. Is there a way to add a method that is the opposite of addSlides? I don’t need to remove particular slides or anything, just get rid of all current slides. Something like destroySlides would work.

Is this easily achieved? I’ve been trying to work on it myself, but I’m a bit stuck. If you could point me in the right direction, I’d really appreciate it.

Thanks again!

Thank you a lot for the plugin!!!

There is just one thing that would be nice to have. My images have transparent zones. So when fading in a new image, one can see an old one beneath it. When the fading finishes, the old one just disappears. But, because of transparent zones, one can see this disappearing. It would be nice to add something like fade-out for an old image (maybe with duration parameter, zero by default).

Hi,

In the uncompressed script it's clear that it's in version 1.4.12. But in the minified one it's still 1.4.11. I minified the script for my purposes by myself, but it would be useful for others if you confirmed that the version you are serving is a minified 1.4.12.

hi i'm in need of help. i'm not sure if i did this right but if someone could please help, see http://jmotive.com/cdhtest/works.html. it moves to the next number before the picture is loaded. once all the pictures are loaded it works fine, the way it is supposed to. but in the beginning when pics are not loaded yet, it is a big mess. please let me know what i am doing wrong. thanks so so very much!

I am really enjoying using this jQuery addon. It is really quite beautiful. Thank you for providing it.

I would like to be able to add a class/id to an individual slide or anchor. Is this functionality currently supported?

how can I make the slideshow advance to the next slide when clicking on the image itself?

No matter what I try, the slideshow does not automatically progress beyond slide #2. Clicking on the numbered index or next/previous controls works, but the slide does not progress automatically.

(I'm working off the latest minified version of rs-Slideshow downloaded off Github)

Here's how I'm initializing the slideshow:

$('body.itinerary_page .rs-slideshow').rsfSlideshow({
'controls': {
        playPause: {auto: true},
        previousSlide: {auto: true},
        nextSlide: {auto: true},
        index: {auto: true}
},
});

Here's what the slideshow markup looks like:

 <div id="trip_slideshow" class="rs-slideshow">
    <img class="" src="/system/images/6/itinerary/IMG_1049.JPG?1332271396" width="100%" />
    <span class="slide-caption"></span>
    <ol class="slides">
      <li><a href="/system/images/6/itinerary/IMG_1049.JPG?1332271396" title=""></a></li>
      <li><a href="/system/images/14/itinerary/IMG_0094.JPG?1334433029" title=""></a></li>
      <li><a href="/system/images/16/itinerary/PICT0036.JPG?1334433180" title=""></a></li>
    </ol>
  </div>

hello! i have just started using this slideshow plugin, but it is not working at all.

when i refresh the page firefox error console shows me that

$('#slideshow-div').rsfSlideshow(); is not a function.

what should i do, coz i really need this.

how do i include the plugin into my website first of all? thank you!

Hello,

I use the last version of the plugin "Really Simple Slideshow" in my website.
When checking the compatibility among the different browsers, I got the conclusion that it works with Safari 5.0.5 , Firefox 4.0 but IE 8.0 (I did not check other versions of IE)

Here is the error message I got : "Object does not support this property or method. jquery.rs.slideshow.js Line 639 Char 7"

First, I have suspected bad configuration on my side. So, I downloaded your "demo pack and check "simpledemo.html" in the different browsers. I got the same conclusion, it does not work in IE8.0.

Next step, I wondered why it is compatible with all browsers when I go on your website (http://reallysimpleworks.com/slideshow/) and not when I use the demo-pack?

I finally got the answer : your plugin does not work with IE when the version of jquery is >1.4.2

On your website, jquery.min 1.4.2 is used. In the demo pack, jquery.min 1.6.1 is used.

Other point : when using jquery.min 1.4.2, fade effect does not work in IE 8.0

Regards,

Martin

I am trying to open one of the data-to links in a new window. I inserted the target="_blank" attribute in the <a> tag, but doesn't work.

I have tried the following, but it doesn't seem to work.

<link rel="stylesheet" href="http://reallysimpleworks.com/slideshow/demo/css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://reallysimpleworks.com/slideshow/demo/js/jquery.rs.slideshow.js?v1.4.10"></script>

<script type="text/javascript">

        $(document).ready(function () {

            var opts = {
                controls: {
                    playPause: {auto: false},
                    previousSlide: {auto: false},
                    nextSlide: {auto: false},
                    index: {auto: false}
                },
                slide_data_selectors: {
                    caption: {selector: 'div.caption', attr: false}
                },
                effect: 'slideLeft',
                interval: 4, 
                transition: 500
            };
            $('.rs-slideshow').rsfSlideshow(opts);

            $('a.open_in_new_window').attr('target', '_blank');


        });     

</script>

    <div class="main">
        <section class="demo-section clearfix" id="demo-1">
            <div id="slideshow-capts-links" class="rs-slideshow">
                <div class="slide-container" style="">
                    <img src="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" class="rsf-slideshow-image" style="left: 0px; top: 0px; ">
                        <div class="slide-caption">This is a caption for the first slide.</div>
                </div>
                <ol class="slides">
                    <li>
                        <a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" ></a>
                    </li>
                    <li>
                        <a class="open_in_new_window" href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-b.png" data-link-to="http://reallysimpleworks.com"></a>
                            <div class="caption">
                                            <p>This slide has the hyperlink</p>
                            </div>
                    </li>
                    <li>
                        <a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-c.png"></a>
                    </li>
                </ol>
        </section>      
    </div>

Hi guys,
Is there any problem running the script on .click statement with jQuery? Everything is ok when using it without any request. However when I add the .click(function() {}); statement everything goes wrong.

is there any other way to see demos and documentation? Url in description is down.

Is it possible to scale an image using CSS with this code?
I tried changing the .rs-slideshow height and width property but it doesn't affect the actual image, just the container.

I've been tweaking the js options to include other objects in the image array (aside from image and caption), and so far it's working great. One issue, however, is the information that populates my array is dynamic from a CRM. After the initial launch, the data loads and cycles great, but I need to find a way to remove the non-java-user dependency on the premier slide. Without access to the array sheet, the default HTML in the data container will always populate slide 1, until it cycles around to array 1. Is adjusting this possible?

Excellent work!

Just wondering if Jquery Image Loader ( http://www.staticvoid.info/imageLoader/ ) might be useful in loading images. Seems a bit more flexible with sync/async control and setting start point (number of images to load from array before beginning).

Also, thinking forward to reading data_selectors from delimitated file ( url,caption,link_to,effect ).

Again, great work!

When the slidehow contains only a single slide, there is no need to show the controls.

This is how I implement this behavior now using the options:
$('#slideshow').rsfSlideshow(
{controls: {
playPause: { auto: $('#slideshow .slides li').length > 1 },
previousSlide: { auto: $('#slideshow .slides li').length > 1 },
nextSlide: { auto: $('#slideshow .slides li').length > 1 },
index: { auto: $('#slideshow .slides li').length > 1 }
}
});

When you have autostop: true for the next/prev buttons have the play pause enabled, it switches the button from "pause" to "play" but the slides still auto advance...

If you look at the html-captions-demo.html demo included in the zip and add the autostop: true to the controls you will see what I mean. Thanks,

Steve

Hi, I've got a very basic setup of the slideshow script running, a simple 5 picture repeating loop.
For some reason the first picture is displayed twice, with the standard fade effect it appears as the first picture beeing projected 2x the time of the other pictures. When i select a slide effect, it just slides in two times in a row.

Any thoughts? I am not too experienced with this stuff, so bear with me..

greetz.. Gerben.

Hello, first of all I would like to thank you for providing this wonderful script.

One issue I am running into is that the autostop: true doesn't seem to work. When I click the next or prev links, I was expecting it to stop the slideshow from playing.

Here is my js snippet I'm using

$(document).ready(function () {

  $('.rs-slideshow').rsfSlideshow({
    controls: {
      previousSlide: {
        auto: true,
        autostop: true
      },
      nextSlide: {
        auto: true,
        autostop: true
      }
    }
  });

});

To fit differently sized images nicely into a given environment, I added an option named 'bounding_box' holding the size, the images should be scaled to. Use [0, 0] to keep default behaviour.

Added a function setBoundingBox(width, height) to change behaviour afterwards.

--- js/jquery.rs.slideshow.js           2013-05-10 15:12:20.000000000 +0200
+++ js/jquery.rs.slideshow.bb.js        2013-05-12 06:37:52.000000000 +0200
@@ -448,6 +448,8 @@
                                        }
                                        $img.css({left: leftOffset});
                                        $img.css({top: topOffset});
+                                       $img.css({width: width});
+                                       $img.css({height: height});
                                        if (slide.image_title){
                                                $img.attr('title', slide.image_title);
                                        }
@@ -616,6 +618,18 @@
                                });
                                RssPrivateMethods._bindActiveIndex($slideshow);
                        });
+               },
+
+
+               /**
+               *       Scale images to bounding box keeping ascpect ratio.
+               *       Width or height = 0 keeps the size unchanged
+               */
+
+               setBoundingBox: function(width, height) {
+                       var bounding_box = $(this).data('rsf_slideshow').settings.bounding_box;
+                       bounding_box[0] = width;
+                       bounding_box[1] = height;
                }


@@ -843,6 +857,13 @@
                        var width = $img.outerWidth();
                        var height = $img.outerHeight();
                        if (width && height) {
+                               var bounding_box = $slideshow.data('rsf_slideshow').settings.bounding_box;
+                               if (bounding_box[0] > 0 && bounding_box[1] > 0) {
+                                       var fac = Math.min(bounding_box[0]/width,
+                                                       bounding_box[1]/height);
+                                       width = Math.ceil(width * fac);
+                                       height = Math.ceil(height * fac);
+                               }
                                $img.detach();
                                sucesss(width, height);
                                return true;
@@ -974,6 +995,9 @@
                        loop: true,
                        //      Start slideshow automatically on initialisation
                        autostart: true,
+                       //      Bounding box to scale images to. Keeps aspect ratio of images.
+                       //      [0,0] keeps the original image size
+                       bounding_box: [0,0],
                        //      Slides to add to the slideshow
                        slides: [],
                        //      Class of the div containing the slide image and caption

Hi all. I'm running into an odd issue with the RSS plugin when the document mode for the homepage is set to IE7 standard. The slideshow only loads one additional image before stopping (this occurs in all versions of IE, due to the IE 7 standard set in the page, unless someone uses the developer console to view it with a different standard). The slideshow works fine in newest versions of Firefox, Safari, Chrome. Unfortunately, we currently need the homepage set to the IE7 standard due to various .css issues and the harsh reality that people viewing the page still largely use IE7....Otherwise I'd probably set it to IE9 standard and make the appropriate .css changes.

Here is the URL if anyone wants to take a look:
www.sru.edu

The homepage was originally designed by another person, and then amended by another company...so I'm in the process of picking this entire page apart still There's a ton of odd code within the page itself. Worth noting, The page is handled via SharePoint 2007(hopefully we'll be utilizing a different or more up to date CMS in the next year or so).

The relevant slideshow plugins being loaded are:
Really Simple Slideshow jQuery plug-in 1.4.11 and jQuery 1.7.1

Any helpful suggestions would be appreciated.

I am using this slider to show current day Event Images. Everything is working fine but while the image is sliding; the next image first comes into view below the 1st image and after that replaces the 1st image. It is sliding well, but just that first it appears below and then it gets displayed at proper place. Its bizzare... Please help me out of this.