SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question how to pause the slide images on mouse hover on this code?

    hi
    i have this cod for slide show and need to add pause wen mouse hover the images . i tryed hours to do it but cant . this is the code :

    Code:
     $().ready(function() {  
     $('#ctgslider').ctgslider({
        'timelength':1000, 
        'showbuttons': 'Y',
        'minibuttons':'Y', 
        'minibuttonopacity': .45, 
        'centerbuttons': 'Y', 
        'alignrightnextbutton' : 'Y',
        'btnoffset':5 ,
        'effects':'fade',
        'captioneffects':'explode',
        'captionclass':'.Caption', 
        'usenumbers':'Y',
        'minibtnimagesrc':'slider/images/circle.png',
        'usecaptions':'Y'
    
    
        }); 
    
    });
    
    
    $(document).ready(function(){
      $('#ctgslider').mouseenter(function(){
        $('#ctgslider').ctgslider({'timelength':'900000'});
      });
      $('#ctgslider').mouseleave(function(){
        $('#ctgslider').ctgslider({'timelength':'1000'});
      });
    });
    a want to play with this part of the code :

    Code:
    $(document).ready(function(){
      $('#ctgslider').mouseenter(function(){
        $('#ctgslider').ctgslider({'timelength':'900000'});
      });
      $('#ctgslider').mouseleave(function(){
        $('#ctgslider').ctgslider({'timelength':'1000'});
      });
    can anyone help me to improve the code to get the pause on mouse over the div "ctgslider" ?

    thanks

  2. #2
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    382
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have any html. A jsfiddle would be good - http://jsfiddle.net

  3. #3
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no i dont have
    i have 2 js files , how to include them in jsfiddle ?

    but this is my htm
    Code:
    <div id="ctgslider" >	
    <img src="slider/images/Slider-1.jpg">
    <div class='Caption'>text text text text text text </div>
    <img src="slider/images/Slider-2.jpg">
    <div class='Caption'>text text text text text text </div>
    <img src="slider/images/Slider-3.jpg">
    <div class='Caption'>text text text text text text </div>
    <img src="slider/images/Slider-4.jpg">
    <div class='Caption'>text text text text text text text text  </div>
    </div>
    thanks

  4. #4
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    382
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jsfiddle is split into four sections
    html - top left
    css - top right
    javascript - bottom left
    result - bottom right

    Place the code in the correct section and hit run

    Hit save and them post the link

  5. #5
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    because there are an images to see it work i attach all the script in one file .
    please just run the index.html and the slider will work on your browser .

    but i need the pause option wen mouse hover the images .

    thank you
    Attached Files Attached Files

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,997
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    As far as I can tell, the slider doesn't expose any kind of events you can hook into, which makes life a little difficult.

    A quick fix would be to add this code to the bottom of your HTML file:

    Code:
    <script>
      sliderPaused = false;
      $("#ctgslider").hover(function(){
        sliderPaused = true;
      }, function(){
        sliderPaused = false;
      });
    </script>
    Then make sure you are using the non-minified version of the script and add this line to the top of the NextPicture function:

    Code:
    if(sliderPaused) return;
    That should work for you.

    demo

  7. #7
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    As far as I can tell, the slider doesn't expose any kind of events you can hook into, which makes life a little difficult.

    A quick fix would be to add this code to the bottom of your HTML file:

    Code:
    <script>
      sliderPaused = false;
      $("#ctgslider").hover(function(){
        sliderPaused = true;
      }, function(){
        sliderPaused = false;
      });
    </script>
    Then make sure you are using the non-minified version of the script and add this line to the top of the NextPicture function:

    Code:
    if(sliderPaused) return;
    That should work for you.

    demo
    thank you very much , but sorry to say that i dont find the NextPicture function (i dont know this ) .
    and i dont know what is this mean "non-minified version of the script " .

    please can you explane more exactly were you puted this code : " if(sliderPaused) return; "?

    or can you giv me the final editing files ?
    please
    thank you

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,997
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Sure.
    I've attached the modified files to this post.
    Attached Files Attached Files

  9. #9
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you very much
    you realy helped me too .

    thanks

  10. #10
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but please there is one problem now i see it :
    wen pause the slide the next arrow (on the right side) dos not work wen click on it .
    this mean cant move to the next image wen pause .

    can this be fixed please ?

    see your demo .

    thanks

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,997
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Oops, yeah, right you are.

    Clicking the next button is calling the function NextPicture() too, so we have to differentiate between hovering on the slider and clicking the slider.

    In the file ctgslider.js change line 165 / 166 from this:

    Code:
    function NextPicture(){
    	if(sliderPaused) return;
    to this:

    Code:
    function NextPicture(e){
    	if(sliderPaused && !e) return;

  12. #12
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thannk you very much for your help .
    realy you made it easy to me .

    thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •