J Carousel Bullet Controls - javascript

I am trying to input the bullet function on my JCarousel. All banners are appearing back-end, but when trying to navigate the banners using the bullet function does not work. The bullets are visible but are inactive. Any idea on the function code to rectify this and enable the buttons to function to allow me to click on different banners? Or even a point in the right direction?
<div class="banners">
<div class="pager jcarousel-control"><a class="jcarousel-next" href="#">1</a>23</div>
<div class="holder">
<div class="slider">
<ul>
<li><img src="{{media url="wysiwyg/Banners/Fluke-Fibre-Process.jpg"}}" alt="" /></li>
<li><img src="{{media url="wysiwyg/Banners/Dymo_XTL_Banner.jpg"}}" alt="" /></li>
<li><img src="{{media url="wysiwyg/Fluke_DTX_Buy_Back_2015.jpg"}}" alt="" /></li>
</ul>
</div>
</div>
</div>

Please provide a Fiddle so that we can assist.
In the meantime try;
(function ($) {
$(function () {
$('.jcarousel').jcarousel();
$('.jcarousel-pagination')
.on('jcarouselpagination:active', 'a', function () {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function () {
$(this).removeClass('active');
})
.jcarouselPagination();
});
})(jQuery);
As used on the official example here: http://sorgalla.com/jcarousel/examples/basic/#4

Related

Replace article with div with a button that will stay and can toggle between article and div content

I want with jQuery when I click the button to toggle the content between the article and the div.
jQuery so far, but its not working as intended.
Thats all i have, i will appreciate if you guys could guide me.
$('.gal').on('click',function(){
if($('article').css('display')!='none'){
$('#vnav').html($('#vnav').html()).show().siblings('div').hide();
}else if($('#vnav').css('display')!=='none'){
$('#vnav').show().siblings('div').hide();}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="gal">Gallery</button></div>
<article>some content inside</article>
<div id="vnav" style="display:none;">
<ul id="horizontal">
<li><img src="images/1.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/2.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/3.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/4.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/5.jpg" width="782" alt="" height="440" /></li>
</ul>
</div>
Thanks in advance!
You just need to write this code to toggle between article & div on button click.
$('.gal').on('click',function(){
$('article').toggle();
$('#vnav').toggle();
});
You can try this https://jsfiddle.net/2Lzo9vfc/170/
JS
var show = true;
$('.gal').click(function() {
if(show == true) {
$('article').hide(200);
$('#vnav').show(200);
show = false;
} else {
$('#vnav').hide(200);
$('article').show(200);
show = true;
}
});

Find a div in Flexslider after callback

I'm using Flexslider. On completing each slide, I want to find the content of a div .extra. I'm trying to use the after callback function of Flexslider to find the content of the div, but it does not find. It does not even find any parent or any other element class.
How can I find the content of .extra div on completing each slide?
HTML:
<div class="box">
<div class="extra">abc</div>
<div class="flexslider">
<ul class="slides">
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
</ul>
</div>
</div>
JS:
$('.flexslider').flexslider({
animation: "slide",
after: function(slider) {
var abc = $(this).parents().find('.extra').html();
alert(abc);
}
});
Demo:
http://jsfiddle.net/he8gfh29/
The below code will work for you :) as the slider's selector is being passed through function(slider) you need to use slider object at the place of $(this).
$('.flexslider').flexslider({
animation: "slide",
after: function(slider) {
var abc = slider.parents().find('.extra').html();
alert(abc);
}
});

Add class to external navigation when slide auto-play happens : anythingSlider

My anythingSlider looks like this
<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/theme-metallic.css">
<div id="externalNav">
Goto One |
Two |
Three |
Four
</div>
<br><br>
<ul id="slider">
<li><img src="http://placekitten.com/300/200" alt="" /></li>
<li><img src="http://placehold.it/300x200" alt="" /></li>
<li><img src="http://placebear.com/300/200" alt="" /></li>
<li><img src="http://lorempixel.com/300/200" alt="" /></li>
<li><img src="http://placedog.com/300/200" alt="" /></li>
</ul>
$('#slider').anythingSlider({
// If true, builds a list of anchor links to link to each panel
buildNavigation: false,
autoPlay: true
});
When autoplay happens and first slide is active I want to add a class to One (and so on for next slides) so that I can show it as selected. Can any one point out what is the correct approach to make this?
JsFiddle
The AnythingSlider Wiki has just the example you wanted:
Custom, external navigation controls (with updating "cur" class)
var nav = $('#externalNav a'),
updateNav = function(page){
nav
.removeClass('cur')
.eq(page).addClass('cur');
}
$('#slider').anythingSlider({
// If true, builds a list of anchor links to link to each panel
buildNavigation: false,
onInitialized: function(e, slider) {
updateNav(slider.currentPage-1);
},
// Callback before slide animates
onSlideBegin: function(e, slider) {
updateNav(slider.targetPage-1);
}
});
// set up external links
nav.click(function(){
var slide = $(this).attr('href').substring(1);
$('#slider').anythingSlider(slide);
return false;
});
Demo: http://jsfiddle.net/Mottie/ycUB6/76/

How to change image and link with data values in Javascript?

I start learn Javascript and I need your help.
I have big image and under big image there are 3 thumbnails. If user click second thumbnail, big image has to changes to second data-bigimage.
And swipebox link has to change to second data-original image. The same for other images.
HTML:
<div class="profile-gallery">
<div class="profile-gallery_top js-bigImg">
<a href="img/bigImg1.jpg" class="swipebox">
<img class="profile-bigImage" src="img/bigImg.jpg" alt=""/>
</a>
</div>
<ul class="profile-thumbs">
<li><img src="img/imgThmubs1.jpg" data-bigimage="img/bigImg1.jpg" data-original="img/origImg1.jpg" alt=""/></li>
<li><img src="img/imgThmubs2.jpg" data-bigimage="img/bigImg2.jpg" data-original="img/origImg2.jpg" alt=""/></li>
<li><img src="img/imgThmubs3.jpg" data-bigimage="img/bigImg3.jpg" data-original="img/origImg3.jpg" alt=""/></li>
</ul>
jQuery(document).ready(function( $ ) {
$('.profile-thumbs li').click(function(){
var imageurl = $(this).children('img').data('bigimage');
var imageorig = $(this).children('img').data('original');
$('.profile-bigImage').attr("src", imageurl);
$('.swipebox').attr("href", imageorig);
});
});
$(this) is always the clicked element in a click function matching the selector.
This may do the stuff, try this:
$(".profile-thumbs li img").click(function() {
var bigImg = $(this).data("bigimage"),
original = $(this).data("original");
$(".swipebox").attr("href", original);
$(".profile-bigImage").attr("src", bigImg);
});
look at the below example using jQuery.
`$(this)` will refer the image clicked.
so $(this).attr('src') will be the source of the image which we click.
assign it to the image which is having class profile-bigImage
$('img').click(function(){
var imgsrc=$(this).attr('src');
$('.profile-bigImage').attr('src',imgsrc);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="profile-gallery">
<div class="profile-gallery_top js-bigImg">
<a href="img/bigImg1.jpg" class="swipebox">
<img class="profile-bigImage" src="img/bigImg.jpg" alt=""/>
</a>
</div>
<ul class="profile-thumbs">
<li><img src="img/imgThmubs1.jpg" data-bigimage="img/bigImg1.jpg" data-original="img/origImg1.jpg" alt=""/></li>
<li><img src="img/imgThmubs2.jpg" data-bigimage="img/bigImg2.jpg" data-original="img/origImg2.jpg" alt=""/></li>
<li><img src="img/imgThmubs3.jpg" data-bigimage="img/bigImg3.jpg" data-original="img/origImg3.jpg" alt=""/></li>
</ul>
You can try something like that, it should work
$(document).on('click','.profile-thumbs img', function(event) {
event.preventDefault();
$('.profile-gallery-top a').attr('href', $(this).data('original'));
$('.profile-gallery-top img').attr('src', $(this).data('bigimage'));
});

simple jquery slider menu

I am trying to achieve a simple menu slider that works like this:
$(document).ready(function() {
// hide slider images on page load \\
$('.sImage1, .sImage2,.sImage3, .sImage4').hide();
// slide sImage1 on page load\\
$('.sImage1').delay(500).slideDown(1000);
// provide slider image click functionallity \\
$('.sOpen1').click(function() {
// close any already open images \\
$('.sImage2, .sImage3, .sImage4').slideUp(500);
// open/close sImage1 \\
$('.sImage1').stop().slideToggle(500);
}); //end click 1
$('.sOpen2').click(function() {
$('.sImage1, .sImage3, .sImage4').slideUp(500);
$('.sImage2').stop().slideToggle(500);
}); //end click 2
$('.sOpen3').click(function() {
$('.sImage1, .sImage2, .sImage4').slideUp(500);
$('.sImage3').stop().slideToggle(500);
}); //end click 3
$('.sOpen4').click(function() {
$('.sImage1, .sImage2, .sImage3').slideUp(500);
$('.sImage4').stop().slideToggle(500);
}); //end click 4
}); // end ready
html:
<div id="menuSlider">
<ul>
<li class="sOpen1">Course Information</li>
<li class="sImage1"><img src="#" /></li>
<li class="sOpen2">Membership</li>
<li class="sImage2"><img src="#" /></li>
<li class="sOpen3">Equipment</li>
<li class="sImage3"><img src="#" /></li>
<li class="sOpen4">Golf Lessons</li>
<li class="sImage4"><img src="#" /></li>
</ul>
</div>
At the moment I only have 4 images to display but it could become 10 or more and so im guessing there is an easier way of achieving the same without so many lines of code?
I'm still learning javascript and jquery, but if some could point me in the direction of a good tutorial on how to achieve the same using an array or similar, it would be much appreciated.
You could reduce this to :
$(document).ready(function() {
$('.sImage').hide();
$('.sImage:first').delay(500).slideDown(1000); //slide down the first image
$('.sOpen').click(function() { //register the handler for .sOpen as a common click event
$('.sImage')
.not(
$(this).next().slideToggle(500) //SlideUp other images except the one next to the clicked element which will be slideToggled
).slideUp(500);
});
});
changing your markup: (Remove the indexes on the classes for the trigger as well as the content li elements)
<div id="menuSlider">
<ul>
<li class="sOpen">Course Information</li>
<li class="sImage"><img src="#" /></li>
<li class="sOpen">Membership</li>
<li class="sImage"><img src="#" /></li>
<li class="sOpen">Equipment</li>
<li class="sImage"><img src="#" /></li>
<li class="sOpen">Golf Lessons</li>
<li class="sImage"><img src="#" /></li>
</ul>
</div>
With this you can add as many number of new items without changing/adding new classnames, handlers etc.
Demo
See
.next()
.not()
try looking here:
www.w3schools.com/jquery/jquery_animate.asp
www.w3schools.com/css3/css3_animations.asp
Perhaps even easier would be, if you simply use jQuery's UI Accordion.
Then you could have simply:
$(function () {
$("#menuSlider").accordion();
});
and then (using h and div tags):
<div id="menuSlider">
<h3>Course Information</h3>
<div>
<img src="#" />
</div>
<h3>Membership</h3>
<div>
<img src="#" />
</div>
<h3>Equipment</h3>
<div>
<img src="#" />
</div>
<h3>Golf Lessons</h3>
<div>
<img src="#" />
</div>
</div>

Categories

Resources