Pause slideshow when hovering over image?

http://www.phoenixdigitalweb.com/Concepts/joeamato/
What code would be needed to pause the slideshow when a mouse hovers over the image?

It also needs to be setup where the catgeory name (bottom left) displays only on a mouse hover.

Thank you!
RiemenDesignAsked:
Who is Participating?
 
McNeticConnect With a Mentor Commented:
Ok. There is another error in my code. Try this:
  $('.titles').hide();
  $('.cycle_slider').cycle({
      fx:'fade',
      timeout: '4000',
      // pause slideshow on hover, see also also http://jquery.malsup.com/cycle/options.html
      pause: 1,
      cleartype:  1 // enable cleartype corrections
    });
	$('.cycle_slider .loading').hover(function() {
        // show category when hovered
        $(this).children(".titles").show();
      }, function() {
        // hide when no longer hovered
        $(this).children(".titles").hide();
      })
    });

Open in new window

Instead of show() and hide(), you can also use other effects like fadeIn() and fadeOut() for smoother transition.
0
 
McNeticCommented:
Your document.ready method should be extended like this:

 
// hide categories first
  $('.titles').hide();
  $('.cycle_slider').cycle({
      fx:'fade',
      timeout: '4000',
      // pause slideshow on hover, see also also http://jquery.malsup.com/cycle/options.html
      pause: 1,
      cleartype:  1 // enable cleartype corrections
    }).hover(function() {
        // show category when hovered
        $(this).children(".titles").show();
      }, function() {
        // hide when no longer hovered
        $(this).children(".titles").hide();
      }
    });

Open in new window


Btw, with this page, the user will almost always hover the images. Where else should he put his mouse pointer? And how will he know there is a slideshow when the pointer is hovering the image on load?
0
 
RiemenDesignAuthor Commented:
Here is the code:

this is custom.js

Let me know if you need a different file:


/*
 * Lazy Load - jQuery plugin for lazy loading images
 *
 * Copyright (c) 2007-2009 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/lazyload
 *
 * Version:  1.5.0
 *
 */
(function($) {

    $.fn.lazyload = function(options) {
        var settings = {
            threshold    : 0,
            failurelimit : 0,
            event        : "scroll",
            effect       : "show",
            container    : window
        };
                
        if(options) {
            $.extend(settings, options);
        }

        /* Fire one scroll event per scroll. Not one scroll event per image. */
        var elements = this;
        if ("scroll" == settings.event) {
            $(settings.container).bind("scroll", function(event) {
                
                var counter = 0;
                elements.each(function() {
                    if ($.abovethetop(this, settings) ||
                        $.leftofbegin(this, settings)) {
                            /* Nothing. */
                    } else if (!$.belowthefold(this, settings) &&
                        !$.rightoffold(this, settings)) {
                            $(this).trigger("appear");
                    } else {
                        if (counter++ > settings.failurelimit) {
                            return false;
                        }
                    }
                });
                /* Remove image from array so it is not looped next time. */
                var temp = $.grep(elements, function(element) {
                    return !element.loaded;
                });
                elements = $(temp);
            });
        }
        
        this.each(function() {
            var self = this;
            
            /* Save original only if it is not defined in HTML. */
            if (undefined == $(self).attr("original")) {
                $(self).attr("original", $(self).attr("src"));     
            }

            if ("scroll" != settings.event || 
                    undefined == $(self).attr("src") || 
                    settings.placeholder == $(self).attr("src") || 
                    ($.abovethetop(self, settings) ||
                     $.leftofbegin(self, settings) || 
                     $.belowthefold(self, settings) || 
                     $.rightoffold(self, settings) )) {
                        
                if (settings.placeholder) {
                    $(self).attr("src", settings.placeholder);      
                } else {
                    $(self).removeAttr("src");
                }
                self.loaded = false;
            } else {
                self.loaded = true;
            }
            
            /* When appear is triggered load original image. */
            $(self).one("appear", function() {
                if (!this.loaded) {
                    $("<img />")
                        .bind("load", function() {
                            $(self)
                                .hide()
                                .attr("src", $(self).attr("original"))
                                [settings.effect](settings.effectspeed);
                            self.loaded = true;
                        })
                        .attr("src", $(self).attr("original"));
                };
            });

            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if ("scroll" != settings.event) {
                $(self).bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $(self).trigger("appear");
                    }
                });
            }
        });
        
        /* Force initial check if images should appear. */
        $(settings.container).trigger(settings.event);
        
        return this;

    };

    /* Convenience methods in jQuery namespace.           */
    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */

    $.belowthefold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).height() + $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top + $(settings.container).height();
        }
        return fold <= $(element).offset().top - settings.threshold;
    };
    
    $.rightoffold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).width() + $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left + $(settings.container).width();
        }
        return fold <= $(element).offset().left - settings.threshold;
    };
        
    $.abovethetop = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top;
        }
        return fold >= $(element).offset().top + settings.threshold  + $(element).height();
    };
    
    $.leftofbegin = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left;
        }
        return fold >= $(element).offset().left + settings.threshold + $(element).width();
    };
    /* Custom selectors for your convenience.   */
    /* Use as $("img:below-the-fold").something() */

    $.extend($.expr[':'], {
        "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
        "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
        "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
        "left-of-fold"   : "!$.rightoffold(a, {threshold : 0, container: window})"
    });
    
    
    
})(jQuery);

Open in new window

0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
RiemenDesignAuthor Commented:
Where would I put it in that file?

Thank you.
0
 
McNeticCommented:
The code I posted should replace the following code your html page:

    $('.cycle_slider').cycle({
    fx:'fade',
	timeout: '4000',
	cleartype:  1 // enable cleartype corrections 
	});

Open in new window


0
 
RiemenDesignAuthor Commented:
OK, I replaced that but you can see that it messes everything up.  What are your thoughts?

http://www.phoenixdigitalweb.com/Concepts/joeamato/
0
 
McNeticCommented:
There is a ) missing in my source, it should be:

// hide categories first
  $('.titles').hide();
  $('.cycle_slider').cycle({
      fx:'fade',
      timeout: '4000',
      // pause slideshow on hover, see also also http://jquery.malsup.com/cycle/options.html
      pause: 1,
      cleartype:  1 // enable cleartype corrections
    }).hover(function() {
        // show category when hovered
        $(this).children(".titles").show();
      }, function() {
        // hide when no longer hovered
        $(this).children(".titles").hide();
      })
    });

Open in new window


Try this again.
0
 
RiemenDesignAuthor Commented:
http://www.phoenixdigitalweb.com/Concepts/joeamato/

The photos appear, but when hovering the slideshow does not pause and the category does not appear on the bottom left.

Any other thoughts?
0
 
RiemenDesignAuthor Commented:
OK my apologies.  It does pause the slideshow.  THANK YOU.

Just not showing the category.
0
 
RiemenDesignAuthor Commented:
Worked.  Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.