I have a jquery code for an image carousel, but I have multiple carousel id's that I want to run through the code. #myCarousel works beautifully, but #historyCarousel doesn't work at all.
I'm very new to JS, so I'm also not sure how to change this to a class if needed (how do I need to edit the code besides replacing # with . ?)
This is the code I have right now - only #myCarousel is working.
jQuery(document).ready(function($) {
$('#myCarousel,#historyCarousel').carousel({
interval: 5000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id = this.id.substr(this.id.lastIndexOf("-") + 1);
var id = parseInt(id);
$('#myCarousel,#historyCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel,#historyCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
The carousel constructor (not sure what you're using) is probably expecting an element (or list with a single item) instead of selection list. Try this in an each loop:
$('#myCarousel,#historyCarousel').each(function(idx, el){
$(el).carousel({ interval: 5000 });
});
Related
I have an image slider that is linked with some links, in the desktop version when you click on the image it is directed to the link correctly, but when I switch to the mobile version and click on the image the link does not work, I tried to resolve this issue using this Jquery:
jQuery (document) .ready (function () {
jQuery ('. fullwidthbanner-container ul> li: nth-child (3) img'). each (function () {
var currentImage = jQuery (this);
currentImage.wrap ("<a target='_self' href='http://jquerybyexample.blogspot.com'" + currentImage.attr("href") + "'</a>");
});
});
but it still didn't work, is there a way for me to make these images hyperlinked?
Would advise trying something like the following.
jQuery(function($) {
$('.fullwidthbanner-container > ul > li:eq(3) > img').each(function(i, el) {
$(el).wrap(function() {
return "<a href='http://jquerybyexample.blogspot.com" + $(this).attr("src") + "'></a>";
});
});
});
See More: https://api.jquery.com/wrap/
Images usually have a src attribute and not a href.
I have a problem with flexslider 2 and elevate zoom plus.
I would like to zoom active image from the slider. I have to use this option, because I also use ACF in wordpress and only this one works as I want. Unfortunately code which I created doesn't work as it should
$(document).ready(function() {
if ($('.flexslider .slides > li').hasClass('flex-active-slide')) {
$('.flexslider .slides li img').addClass('zooming');
}
else
{
$('.flexslider .slides li img').removeClass('zooming');
}
});
</script>
When the li has class which means that image is active, then I would like to add class to the image which has to be zoomed. Unfortunately it adds zooming class to all images in slider without checking if the li is active. What am I doing wrong?
No need to add different js for this, you can add in initialization only like below:
$(window).load(function () {
$('.flexslider').flexslider({
animation: "slide",
start: function (slider) {
$('body').removeClass('loading');
$(slider).find(".flex-active-slide img").addClass("zooming"); // this will add class on slider start
},
before: function (slider) {
$(slider).find(".zooming").each(function () {
$(this).removeClass("zooming"); // this will remove class from previous tag
});
},
after: function (slider) {
$(slider).find(".flex-active-slide img").addClass("zooming"); // this will add class in next tag
}
});
});
Your logic is close, but you are targeting all images with this line:
$('.flexslider .slides li img').addClass('zooming');
It also has to run every time the classes of the slide > li changes.
Unfortunately jQuery doesn't have something nice like .classChange(), but here is a function - created by kozachenko on github - which does what we want.
So you can add kozachenko's function and then use it to see if the class of the li has changed, then add/remove your zooming class.
To find only the one you're looking for, you can use the active class as a selector, and then use jQuery.find() to look for the image inside of that particular element.
$(document).ready(function(){
//kozachenko's function https://gist.github.com/kozachenko/30e55fb5f9ae170eedfe258430fd09ec
(function(){//adds a trigger step to the addClass/removeClass jQuery functions
var originalAddClassMethod = jQuery.fn.addClass;
var originalRemoveClassMethod = jQuery.fn.removeClass;
jQuery.fn.addClass = function(){
var result = originalAddClassMethod.apply( this, arguments );
jQuery(this).trigger('classChanged');
return result;
}
jQuery.fn.removeClass = function(){
var result = originalRemoveClassMethod.apply( this, arguments );
jQuery(this).trigger('classChanged');
return result;
}
})();
$('.flexslider .slides > li').on('classChanged', function(){//the new event triggered by addClass()/removeClass()
$(this).find('img').removeClass('zooming');//first remove the class from any other image
$('.flex-active-slide').find('img').addClass('zooming'); //add the class to active image
});
});
I am creating an plugin with wordpress for the portfolio items. Everything works fine . But the issue is when i apply the filter the hover effect stopped working on the cloned items
also available JS FIDDLE
the jquery code is given below i tried
/* Scroll to Top Button */
jQuery(document).ready(function() {
// Animate Box Shadow on some elements
// Add the overlay. We don't need it in HTML so we create it here
// Clone portfolio items to get a second collection for Quicksand plugin
var $portfolioClone = jQuery(".rudra-portfolio").clone(true);
// Attempt to call Quicksand on every click event handler
jQuery(".rudra-portfolio-filter a").click(function(e) {
jQuery(".rudra-portfolio-filter li").removeClass("current");
// Get the class attribute value of the clicked link
var $filterClass = jQuery(this).parent().attr("class");
if ($filterClass == "all") {
var $filteredPortfolio = $portfolioClone.find("li");
} else {
var $filteredPortfolio = $portfolioClone.find("li[data-type~=" + $filterClass + "]");
}
// Call quicksand
jQuery("ul.rudra-portfolio").quicksand($filteredPortfolio, {
duration: 500,
easing: 'easeInOutQuad'
});
jQuery(this).parent().addClass("current");
// Prevent the browser jump to the link anchor
e.preventDefault();
})
jQuery(".port-li").click(function() {
jQuery(this).find('.content-wrapper').slideDown();
});
jQuery(".overeffect").mouseover(function() {
jQuery(this).find('.content-wrapper').slideDown();
});
jQuery("#portfolio-grid li").mouseleave(function() {
jQuery('.content-wrapper').slideUp(500);
});
});
hour effect is working fine for first and second time , but after that it stopped working .
Update
I also tried this Jquery clone
solved by me ..
i just need to use this
jQuery(document).on('hover',".overeffect",function(){
jQuery(this).find('.content-wrapper').slideDown();
});
Why is the DIV not inserted but only the IMG ?
$(document).ready(function() {
$(document).on('click', '#insertImage', function(){
/*
Why is the DIV not inserted ?
*/
var item = "<div class='resizable'><img src='http://www.rockiesventureclub.org/wp-content/uploads/2013/02/flower-icon.png'></div>";
document.execCommand('insertHTML', false,item);
})
});
see:
http://jsfiddle.net/daslicht/gU2jP/#base
Why not doing it with jQuery since you already use it??
http://jsfiddle.net/gU2jP/5/
var _$div = $('<div>'),
_$img = $("<img class='resizeable' id='myImg' src='http://imperavi.com/img/library.jpg' />");
_$div.append(_$img);
$('body').append(_$div);
The background of the Question was the following:
I just like to be able to make the added Image Float Left or Right.
Since jQueryUI automatically adds a wrapper-div around each resizeable item I thought that I need to add it somehow manually in order to assign a id to it.
doug65536 on Freenode helped me to create this solution without the need to create an additionally div manually:
We also discovered that the Fiddle wont work properly in safari
$(document).on('click', '#insertImage', function () {
document.execCommand('insertHTML', false,
"<img class='resizeable' id='myImg' src='http://imperavi.com/img/library.jpg'>");
$(".resizeable").resizable({
aspectRatio: true
}); //just a try here
$('#myImg').parent().css({
'float':'left',
'margin':'15px'
});
})
http://jsfiddle.net/daslicht/6cGbQ/
Thank you very Much !
I am working on a jQuery slideshow plugin. One of my methods involves switching back and forth between pictures. I have been pretty successful in creating it, here is an isolated case with the code thus far for the particular method:
var images = $("#simpleslides").children("img");
$(".slideButtons ul li").on("click", "a", function() {
var anchorIndex = $(this).parent().index();
var $activeSlide = $("#simpleslides img:visible");
var $targetSlide = $(images[anchorIndex]);
if($activeSlide.attr("src") == $targetSlide.attr("src") || $targetSlide.is(":animated")) {
return false;
} else {
$activeSlide.css({ "z-index" : 0 });
$targetSlide.css({ "z-index" : 1 });
$targetSlide.stop().fadeIn("slow", function() {
$activeSlide.hide();
});
}
});
Here is a fiddle to see it in working action: http://jsfiddle.net/ase3E/
For the most part, this works as you would expect it to. When a user clicks on the corresponding number, it fades in the picture.
However, I am running into some jumpiness and occasionally a complete hide of the slides when I am clicking around quickly. If you play with the fiddle, you will see what I am referring to Try clicking around on each image to see.
I have adopted stop which I thought would fix the problem but has not. I have put the hide method after the fadeIn callback, but that has also not helped the situation.
What am I doing wrong here??
LIVE DEMO :)
var images = $("#simpleslides").find("img");
$(".slideButtons ul").on("click", "li", function(e) {
e.preventDefault();
var i = $(this).index();
images.eq(i).stop().fadeTo(500,1).siblings('img').fadeTo(500,0);
});