Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Stop Function to Jquery Slider

Posted on 2011-10-16
13
Medium Priority
?
2,657 Views
Last Modified: 2012-06-27
I am using the jquery slider available at

http://slidesjs.com/


I would like to get the slide show to stop on the last side and not loop through.

As you might imagine, there is more javascript involved with this application that I can convey here which would need to be reviewed in the assessment.

I have tried adding:

            
$(function(){
      $('#slides').slides(function() {
  $(this).find('Slide-7').stop(true);
});              
});                  

and

$(function(){
$("#slides").slide({
stop:7 });
});

I can't seem to get this to stop after just one cycle.
I do not want the user to have to click anything to make this action to happen.

If someone has worked with this widget before, I'd appreciate your help.
This seems to be an ongoing question in the support group for this widget with no resolution available.
Thanks

0
Comment
Question by:LT1415
  • 8
  • 3
  • 2
13 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36978532
I think you are applying some wishful thinking there.

this works:

$(function(){
  $("#slides").slides({

    animationComplete: function(current) {
      // use the "current" slide number
      if (current >= 7) {
         $(this).pause();
      }
    }, // remember the comma

// here are your normal stuff you already have
.
.
  });
});

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36978588
OOps.

Hang on. Not correct
0
 
LVL 3

Expert Comment

by:saimazz
ID: 36978843
$(function(){
      $('#slides').slides{
pause: '6'  //7 th slide, remember it must be string
});              
});  
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 3

Expert Comment

by:saimazz
ID: 36978850
Or it should work that way :
$(function(){
  $("#slides").slides({
    animationComplete: function(current) {
      if (current >= 7) {
         $("#slides").slides("pause");
      }
    }
  });
});

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36978855
No. Neither of those work
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36978966
I am investigating

I have a fiddle going here http://jsfiddle.net/mplungjan/Fakwx/
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36979808
Here you go

$(function(){
  var total = $("#slides img").length - 2; // Subtract Two arrows
  $('#slides').slides({
     animationComplete: function(current) {
         if (current >= total) {
          clearInterval($('#slides').data('interval'));
          $(".pagination").remove();
          $(".prev").remove();
          $(".next").remove();
         }
       },            
       preload: true,
       preloadImage: 'http://slidesjs.com/img/loading.gif',
       play: 5000,
       pause: 2500,
       slideSpeed: 600,
       hoverPause: true
   });
});

Change
          clearInterval($('#slides').data('interval'));

to

          clearInterval($('#slides').data('interval'));
          $(".pagination").remove();
          $(".prev").remove();
          $(".next").remove();

if you want to remove the arrows and the dots
You will need to give them an ID or index them if you have more than one slideshow since the remove code will remove all class=paginations and all class=next and all class=prev on the page.
0
 

Author Comment

by:LT1415
ID: 36981394
mplungjan:-- Thanks so much your last solution is great.
The captions are also cleared away after the first slide.
The captions are not mandatory, but can you see a way to keep them.
I could not get it to work keeping the captions--no surprises there.

I can probably comment out the arrows and pagination from the Web page, so those elements are
not important to me.  Thanks again
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36985533
Can you show me an example?

What captions and are they removed after the FIRST slide?

The code is not supposed to do that.
0
 

Author Comment

by:LT1415
ID: 36989033
One of the options and part of the download with the widget is to have
captions appear
with the  picture.
The example they show here:
http://slidesjs.com/
does not show the captions.

In the original code listed below (which does not include your solution)
they refer to the captions.
I will also include a portion of the html code where the captions are
stated.

The solution, which is great-- cleared the captions on all but the first
slide.
If it's possible to keep the captions, great. If not this solution will
work for me
and is very much appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    
    <title>Slides, A Slideshow Plugin for jQuery</title>
    
    <link rel="stylesheet" href="css/global.css">
    
    <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"><
/script>
    <script src="js/slides.min.jquery.js"></script>
    <script>
        $(function(){
            $('#slides').slides({
                preload: true,
                preloadImage: 'img/loading.gif',
                play: 5000,
                pause: 2500,
                hoverPause: true,
                animationStart: function(current){
                    $('.caption').animate({
                        bottom:-35
                    },100);
                    if (window.console &&
console.log) {
                        // example return of
current slide number
    
console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console &&
console.log) {
                        // example return of
current slide number
    
console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }
            });
        });
        
    
    </script>
</head>
<body>
    <div id="container">
        <div id="example">
            <img src="img/new-ribbon.png" width="112"
height="112" alt="New Ribbon" id="ribbon">
            <div id="slides">
                <div class="slides_container">
                    <div class="slide">
                        <a
href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 -
Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img
src="img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
                        <div class="caption"
style="bottom:0">
                            <p>Happy Bokeh
Thursday!</p>
                        </div>
                    </div>
                    <div class="slide">
                        <a
href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi
| Flickr - Photo Sharing!" target="_blank"><img src="img/slide-2.jpg"
width="570" height="270" alt="Slide 2"></a>
                        <div class="caption">
                            <p>Taxi</p>
                        </div>
                    </div>
</body>
</html>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36990523
I'll look later
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 36990918
This works for me.

the caption stays
$(function(){
            var total = $("#slides img").length - 2; // Subtract Two arrows
            $('#slides').slides({
                preload: true,
                preloadImage: 'img/loading.gif',
                play: 5000,
                pause: 2500,
                hoverPause: true,
                animationStart: function(current){
                    $('.caption').animate({
                        bottom:-35
                    },100);
                    if (window.console &&  console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                    if (current >= total) {
                      clearInterval($('#slides').data('interval'));
                      $(".pagination").remove();
                      $(".prev").remove();
                      $(".next").remove();
                    }
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }
            });
        });

Open in new window

0
 

Author Closing Comment

by:LT1415
ID: 36994049
You rock mplungjan.
Thanks so much!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Measuring Server's processing rate with a simple powershell command. The differences in processing rate also was recorded in different use-cases, when a server in free and busy states.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question