Linktipp: Howto: JQuery jcarousel Pause bei Hover

Submitted by Julian Pustkuchen on 9. September 2011 - 17:17

So einfach kann jcarousel um eine Hover-Pause ergänzt werden!

Großartiger Code-Schnippsel!

Hier noch einmal kopiert, falls die URL irgendwann nicht mehr erreichbar ist:

jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
scroll: 1,
auto: 2,
wrap: 'last',
initCallback: function(jc, state) {
if (state == 'init') {
/* Pause carousel scrolling when a user mouses overs
an item and restart the scrolling when they mouse out.
* Written by cormac at finisco dot com 19/2/2009
based on work by Jeremy Mikola:
* <a href="http://groups.google.com/group/jquery-en/browse_thread/thread/f550b94...
" title="http://groups.google.com/group/jquery-en/browse_thread/thread/f550b94...
">http://groups.google.com/group/jquery-en/browse_thread/thread/f550b94...
</a> */
jc.startAutoOrig = jc.startAuto;
jc.startAuto = function() {
if (!jc.paused) {
jc.startAutoOrig();
}
}
jc.pause = function() {
jc.paused = true;
jc.stopAuto();
};
jc.play = function() {
jc.paused = false;
jc.startAuto();
};
$('li.jcarousel-item').mouseover(function() {
jc.pause();
});
$('li.jcarousel-item').mouseout(function() {
jc.play();
});
}
jc.play();
}
});
});

Link:

http://groups.google.com/group/jquery-en/browse_thread/thread/f550b94914d10065?p...

Einordnung:

JQuery

Comments

Post new comment

Your name: *

E-mail: *

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.

Homepage:

Subject:

Comment: *

Web page addresses and e-mail addresses turn into links automatically.
Internal paths in single or double quotes, written as "internal:node/99", for example, are replaced with the appropriate absolute URL or path. Paths to files in single or double quotes, written as "files:somefile.ext", for example, are replaced with the appropriate URL that can be used to download the file.
Allowed HTML tags: <a> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd><blockquote>
Lines and paragraphs break automatically.
Pairs of<blockquote> tags will be styled as a block that indicates a quotation.
You can enable syntax highlighting of source code with the following tags: <c>, <cpp>, <css>, <drupal5>, <drupal6>, <java>, <javascript>, <mysql>, <php>, <python>, <ruby>, <smarty>, <xml>. The supported tag styles are: <foo>, [foo]. PHP source code can also be enclosed in <?php ... ?> or <% ... %>.
Textual smileys will be replaced with graphical ones.
Each email address will be obfuscated in a human readable fashion or (if JavaScript is enabled) replaced with a spamproof clickable link.

More information about formatting options

Notify me when new comments are posted

Word verification: * Type the characters you see in this picture.

(verify using audio)

Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.

Julian Pustkuchen ist passionierter Software- & Webentwickler mit den Schwerpunkten Softwaredesign, Objektorientierung, Ablaufoptimierung und Usability bei webks. Ein weiterer Schwerpunkt ist die Entwicklung im CMS Drupal.
Er besitzt einen Abschluss als B.Sc. Wirtschaftsinformatik (dual) und studiert derzeit für seinen Abschluss als Master of Science Wirtschaftsinformatik.