I am trying to add a jQuery plugin to a website I am working on for one of my coding classes. (see code at https://jsbin.com/jawibotera/edit?html,output) I am trying to add the plugin AnythingSlider to my code. I am following the documentation on the Github wiki page (https://github.com/CSS-Tricks/AnythingSlider/wiki/Setup) especially for the code in the head tags and the example HTML. However the output always shows the three pictures underneath each other and aren't in a slide show. So far I've changed the css pages and have made sure I have set everything to jQuery. I removed all the optional plugins and used all the links provided from my coding course. For the assignment, I was given these links:
http://skillcrush.com/wp-content/themes/skillcrush2.30/class-files/anything-slider/js/jquery.anythingslider.min.js
http://skillcrush.com/wp-content/themes/skillcrush2.30/class-files/anything-slider/css/anythingslider.css
Even when I use the links my coding course provides, I am not able to get a slideshow. I looked at the code for the examples on the Github page to double check my own code, however I can't find any errors. Should I link two css pages to one site? If not, which css page should I use?
I would really recommend that you go with flexslider, as it is far superior to this in my opinion, and I don't know what was wrong with your implementation but when moving your site on top of a JSFiddle with anythingslider already in it, it worked just fine. Here is the link:
http://jsfiddle.net/ycUB6/10706/
and since the only thing I changed was the Jquery here it is too:
var modalContainer = $("#modal-container");
var hideModal = function() {
modalContainer.hide();
};
var showModal = function() {
modalContainer.show();
};
var modalShowButton = $("#modal-show");
modalShowButton.on("click", showModal);
var modalCloseButton = $("modal-hide");
modalCloseButton.on("click", hideModal);
$(document).on("keyup", function(evt) {
evt = evt || window.event;
if (evt.keyCode === 27) {
hideModal();
}
});
var handleNewsletterSignup = function(evt) {
evt.preventDefault();
var newsletterHeader = $("#newsletter-header");
var newsletterForm = $("#newsletter-signup");
newsletterForm.hide();
newsletterHeader.text("Thank you for signing up!");
setTimeout(hideModal, 2000);
};
var newsletterForm = $("#newsletter-signup");
newsletterForm.on("submit", handleNewsletterSignup);
var clockTime = function() {
var currentTime = new Date ();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if (hours <= 11) {
var period = "AM";
} else {
var period = "PM";
}
if (hours > 12) {
hours = hours - 12;
} else if (hours === 0) {
hours = 12;
}
if (minutes < 10) {
minutes = "0" + String(minutes);
}
if (seconds < 10) {
seconds = "0" + String(seconds);
}
var time = hours + ':' + minutes + ':' + seconds + ' ' + period;
return time;
};
var clock = $("#clock");
setInterval(function() {
clock.text(clockTime());
}, 1000);
$('#slider').anythingSlider({
// *********** Appearance ***********
// Theme name; choose from: minimalist-round, minimalist-square,
// metallic, construction, cs-portfolio
theme: 'default',
// Set mode to "horizontal", "vertical" or "fade"
// (only first letter needed); replaces vertical option
mode: 'horizontal',
// If true, the entire slider will expand to fit the parent element
expand: false,
// If true, solitary images/objects in the panel will expand to
// fit the viewport
resizeContents: true,
// Set this value to a number and it will show that many slides at once
showMultiple: false,
// Anything other than "linear" or "swing" requires the easing plugin
easing: "swing",
// If true, builds the forwards and backwards buttons
buildArrows: true,
// If true, builds a list of anchor links to link to each panel
buildNavigation: true,
// If true, builds the start/stop button
buildStartStop: true,
// Append forward arrow to a HTML element
// (jQuery Object, selector or HTMLNode), if not null
appendFowardTo: null,
// Append back arrow to a HTML element
// (jQuery Object, selector or HTMLNode), if not null
appendBackTo: null,
// Append controls (navigation + start-stop) to a HTML element
// (jQuery Object, selector or HTMLNode), if not null
appendControlsTo: null,
// Append navigation buttons to a HTML element
// (jQuery Object, selector or HTMLNode), if not null
appendNavigationTo: null,
// Append start-stop button to a HTML element
// (jQuery Object, selector or HTMLNode), if not null
appendStartStopTo: null,
// If true, side navigation arrows will slide out on
// hovering & hide # other times
toggleArrows: false,
// if true, slide in controls (navigation + play/stop button)
// on hover and slide change, hide # other times
toggleControls: false,
// Start button text
startText: "Start",
// Stop button text
stopText: "Stop",
// Link text used to move the slider forward
// (hidden by CSS, replaced with arrow image)
forwardText: "»",
// Link text used to move the slider back
// (hidden by CSS, replace with arrow image)
backText: "«",
// Class added to navigation & start/stop button
// (text copied to title if it is hidden by a negative text indent)
tooltipClass: 'tooltip',
// if false, arrows will be visible, but not clickable.
enableArrows: true,
// if false, navigation links will still be visible, but not clickable.
enableNavigation: true,
// if false, the play/stop button will still be visible, but not
// clickable. Previously "enablePlay"
enableStartStop: true,
// if false, keyboard arrow keys will not work for this slider.
enableKeyboard: true,
// *********** Navigation ***********
// This sets the initial panel
startPanel: 1,
// Amount to go forward or back when changing panels.
changeBy: 1,
// Should links change the hashtag in the URL?
hashTags: true,
// if false, the slider will not wrap
infiniteSlides: true,
// Details at the top of the file on this use (advanced use)
navigationFormatter: function(index, panel) {
// This is the default format (show just the panel index number)
return "" + index;
},
// Set this to the maximum number of visible navigation tabs;
// false to disable
navigationSize: false,
// *********** Slideshow options ***********
// If true, the slideshow will start running; replaces "startStopped" option
autoPlay: false,
// If true, user changing slides will not stop the slideshow
autoPlayLocked: false,
// If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
autoPlayDelayed: false,
// If true & the slideshow is active, the slideshow will pause on hover
pauseOnHover: true,
// If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
stopAtEnd: false,
// If true, the slideshow will move right-to-left
playRtl: false,
// *********** Times ***********
// How long between slideshow transitions in AutoPlay mode (in milliseconds)
delay: 3000,
// Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
resumeDelay: 15000,
// How long the slideshow transition takes (in milliseconds)
animationTime: 600,
// How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).
delayBeforeAnimate : 0,
// *********** Callbacks ***********
// Callback before the plugin initializes
onBeforeInitialize: function(e, slider) {},
// Callback when the plugin finished initializing
onInitialized: function(e, slider) {},
// Callback on slideshow start
onShowStart: function(e, slider) {},
// Callback after slideshow stops
onShowStop: function(e, slider) {},
// Callback when slideshow pauses
onShowPause: function(e, slider) {},
// Callback when slideshow unpauses - may not trigger
// properly if user clicks on any controls
onShowUnpause: function(e, slider) {},
// Callback when slide initiates, before control animation
onSlideInit: function(e, slider) {},
// Callback before slide animates
onSlideBegin: function(e, slider) {},
// Callback when slide completes - no event variable!
onSlideComplete: function(slider) {},
// Callback when slider resizes
onSliderResize: function(e, slider) {},
// *********** Interactivity ***********
// Event used to activate forward arrow functionality
// (e.g. add jQuery mobile's "swiperight")
clickForwardArrow: "click",
// Event used to activate back arrow functionality
// (e.g. add jQuery mobile's "swipeleft")
clickBackArrow: "click",
// Events used to activate navigation control functionality
clickControls: "click focusin",
// Event used to activate slideshow play/stop button
clickSlideshow: "click",
// *********** Video ***********
// If true & the slideshow is active & a youtube video
// is playing, it will pause the autoplay until the video
// is complete
resumeOnVideoEnd: true,
// If true the video will resume playing (if previously
// paused, except for YouTube iframe - known issue);
// if false, the video remains paused.
resumeOnVisible: true,
// If your slider has an embedded object, the script will
// automatically add a wmode parameter with this setting
addWmodeToObject: "opaque",
// return true if video is playing or false if not - used
// by video extension
isVideoPlaying: function(base) {
return false;
}
});
I have succesfully defined a popup for a clickable link element:
The element:
`Alerts Page`
The script which triggers my popup (note the commented lines!)
$('[data-tcs]')
.popup({
// (default as in example provided on the S-UI, works well)
// popup : $('#popup-1'),
// (attempt 1, doesn't work)
// popup : $(this).data('tcs'),
// (attempt 2, doesn't work)
popup : $(this).attr('data-tcs'),
on : 'hover',
delay: {
show: 0,
hide: 500
},
hoverable: true
});
The popup itself (irrelevant):
<div class="ui popup" id="popup-1">
<h3>TANJ!</h3>
</div>
TO DO
Now the popup works well ONLY when the ID of target content is pointed directly, but...
I am about to put about 10 more popups and I want to use the same script to trigger them.
How I can point to the proper popup depending on the value of data-tcs attribute?
My attempts were friutless.
Thx for all help.
The docs are here:
http://semantic-ui.com/modules/popup.html#/examples
Whenever you need to pass instance specific data to any plugin options the easiest way is to wrap the initialization in an each loop
Then the each loop will expose the instance as this.
When you are trying to use this currently it is the window not the element
$('[data-tcs]').each(function() {
var $el = $(this);
$el.popup({
popup: $el.attr('data-tcs'),
on: 'hover',
delay: {
show: 0,
hide: 500
},
hoverable: true
});
});
Trying to relocate captions on flexslider,thought I could do:
var myP = $('p.flex-caption').detach().appendTo(x);
where x would be whatever element I wanted the captions to appear after.
In practice it works ok - I get a dump of all of the captions instead of just the one associated with the active slide but that may be just a css thing -the bigger problem is this doesn't happen until the second slide. I am calling this inside of flexslider.js, (pasted below) inside of $(selector).flexslider and inside of 'before' - I'm guessing the problem has something to do with how things are loaded. In an alternate approach, instead of using detach() to just pluck the p off and re-locate it, I tried creating an element - captionDiv - inside of which another created element - caption - would get filled with the html returned from querying slider.slides[slider.animatingTo] but, again, the first caption wouldn't appear.
$(selector).flexslider( {
smoothHeight: options.h_responsive,
animation: options.animation,
direction: options.direction,
slideshow: options.slideshow,
slideshowSpeed: Number( options.cycle_speed ) * 1000,
animationSpeed: Number( options.animation_speed ) * 1000,
pauseOnHover: options.pause_on_hover,
controlNav: options.control_nav,
directionNav: options.direction_nav,
keyboard: options.keyboard_nav,
touch: options.touch_nav,
before: function( slider ) {
slider.removeClass('loading');
//added for outside caption
//var sgmCaption = $('p.flex-caption');
var tnh = $('div.flex-thumbnail-holder');
//sgmCaption.detach().appendTo(tnh);
if (!slider.captionDiv) {
slider.captionDiv = document.createElement("div");
slider.captionDiv.setAttribute("class", $(slider)[0].getAttribute("id") + "-caption flex-outside-caption");
//$(slider.captionDiv).insertAfter($(slider));
$(slider.captionDiv).insertAfter($(tnh));
}
var caption = slider.slides[slider.animatingTo].querySelector('.flex-caption');
slider.captionDiv.innerHTML = caption ? caption.innerHTML : "";
}
});
Thank you for your help.
Per documentation:
$(selector).flexslider({
// Callback: function(slider) - Fires when the slider loads the first slide
start: function(){},
// Callback: function(slider) - Fires asynchronously with each slider animation
before: function(){}
});
before callback is fired only when animation between slides starts. You need to prepare the caption of the first slide yourself - after hooking up or in the start callback.
I have a navigation menu that upon hovering (using the hoverIntent plugin and tweenmax to animate) replaces a div with the relevant background image. I have this all working fine, but what i'm stumped with is how to prevent the action being repeated on the element that is currently selected. So for example if you hover over the first and then hover off it I don't want the action to be repeated once you hover over that one again because it is already selected. Attached is the link my fiddle http://jsfiddle.net/olichalmers/5csofnhz/1/
var homeNav = function () {
var tgt = $(this);
$("#homeImageNav a ").hoverIntent({
over: homeNavOver,
out: homeNavOff,
interval: 0
});
function homeNavOver() {
var tgt = $(this);
var bgHold = $("#bgHolder");
var bg = tgt.attr('data-bg');
if (!tgt.hasClass('current')) {
TweenMax.set($("#bgHolder"), {
opacity: 0,
background: bg,
scale: 1.1
});
TweenMax.to(bgHold, 1.5, {
opacity: 1,
scale: 1,
});
}
//tgt.addClass('current');
}
function homeNavOff() {
//if (tgt.hasClass('current')) {
//tgt.removeClass('current');
//}
}
};
And here is the homeNav function.
You just need to make changes in your function - homeNavOff like this:
function homeNavOff() {
$('#homeImageNav a').removeClass('current');
$(this).addClass('current');
}
See it in action on this fiddle
Updated your Fiddle
What I have added is:
One variable to store current selected link
Check it with the hovered link
If it is not the same then perform Background change
Else do nothing.
Update everytime any link(One or Two) is hovered
Look on this :
http://jsfiddle.net/5csofnhz/6/
If any query feel free to ask
I have an idangerous swiper on my page which successfully simulates touch events on both the slides and accompanying scrollbar (allowing a mouse click and movement to slide slides left or right).
This is fine, but I've now called draggable on the slides within the swiper, which means I need to stop this touch simulation (dragging the slides and moving them at the same time is causing confusion) - but only on the slides, not the scrollbar (I still need the scrollbar to function as it did subsequent to a mouse click and movement).
What I've Tried
According to the API I can disable touch simulation:
var swiper = new Swiper('.swiper', {
slidesPerView: 3,
simulateTouch: false,
scrollbar: {
container: '.swiper-scrollbar',
hide: false,
draggable: true,
snapOnRelease: true
}
});
This works as expected, but on both the scrollbar and slides, which is no good.
I've also tried returning false from a number of the events the swiper api exposes:
var swiper = new Swiper('.swiper', {
slidesPerView: 3,
onTouchStart: function()
{
return false;
},
scrollbar: {
container: '.swiper-scrollbar',
hide: false,
draggable: true,
snapOnRelease: true
}
});
This doesn't have any effect at all.
Here is solution for Swiper-3.3.1
simulateTouch:false
I found a way that, for now, I'm happy with.
In the idangerous swiper source (idangerous.swiper-2.1.js) I return false from the onTouchStart function (line 1120) so my code now resembles the following:
function onTouchStart(event) {
if (params.preventLinks) _this.allowLinks = true;
//Exit if slider is already was touched
return false;
if (_this.isTouched || params.onlyExternal) {
return false;
}
This is non-invasive to the way the scrollbar prototype works too, so the scrollbar's touch events are left in-tact.
Solution for Swiper-6.6.2.
Just add to class of the object you do not want to be swiped 'swiper-no-swiping'.
Then just add below code to your js file.
const swiper = new Swiper('.swiper-container', {
noSwipingClass: 'swiper-no-swiping'
});