Can anyone recommend any good product auto slider with buttons. I am new to jquery so any good easy jquery slider would be fine. I am looking to build this kind of slider
.And when click on the image then it should open the clicked image with description like this . Any help of how can i make this slider would be appreciated thanks in the advance.
popup: colorbox
slider: elastislide-responsive-carousel
http://jsfiddle.net/ckraoftt/1/
HTML:
<div class="column">
<ul id="carousel" class="elastislide-list">
<li><img src="img44" alt="image04" /></li>
<li><img src="img33" alt="image03" /></li>
<li><img src="img22" alt="image02" /></li>
<li><img src="img11" alt="image01" /></li>
</ul>
</div>
JQ:
$( '#carousel' ).elastislide( {
orientation : 'vertical'
} );
$('#carousel a').colorbox({photo :true});
EDIT2:
http://jsfiddle.net/ckraoftt/7/
for all a tag add 2 attr:
data-txt="image 4 4000$" //text after image
data-button-url="http://test.com/shop/4" //url for button Shop
JQ
$( '#carousel' ).elastislide( {
orientation : 'vertical'
} );
$('#carousel a').colorbox({
html:function(){
var src=$(this).attr('href');
var txt=$(this).attr('data-txt');
var url=$(this).attr('data-button-url');
var img='<img src="'+src+'">';
var text= '<div class="pp_txt">'+txt+'</div>';
var btn='<a class="pp_btn" href="'+url+'">SHOP</a>';
var html='<div class="popup">'+img+text+btn+'</div>';
return html;
}
Related
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);
}
});
Hi I have a bxslider which is in a transformed/scaled container. How can I correct the calculation of the slide position. It seems like a normal reload doesn't affect the calculation when its container is scaled.
//EDIT: I found out that this problem effects not the fade mode of the bxslider, so this could be a workaround...
How can the horizontal mode of the bxslider be fix, when the whole container got scaled down?
See my example: http://jsfiddle.net/wittich/umgwrh3b/
HTML
<div class="container">
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
</ul>
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
</ul>
</div>
<p>Click to reload slider</p>
JS
jQuery(document).ready(function(){
var sliders = [];
jQuery('.bxslider').each(function(i,item){
var slider = $(this);
slider.bxSlider({
auto: true,
mode: 'horizontal'
});
sliders[i] = slider;
});
$('.container').css('transform', 'scale(0.8)');
$(sliders).each(function(){
this.reloadSlider();
});
$('#reload-slider').click(function(e){
e.preventDefault();
$(sliders).each(function(){
this.reloadSlider();
});
});
});
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/
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'));
});
I have select language drop down menu.
When the Flag is hovered it should display the language options and remain showed. When the mouse leaves the language options or when the flag is hovered again the language options should be hidden. I tried but it is showing and hiding instantly.
Html:
<img src="images/english.jpg" alt="en" id="langflag">
<div class="select-lang" style="display:none;">
<h2>In Your Language</h2>
<ul>
<li><img src="images/in_14.png" alt="in"> हिन्दी </li>
<li><img src="images/es_14.png" alt="es"> Español</li>
<li><img src="images/fr_14.png" alt="fr"> Français</li>
<li><img src="images/de_14.png" alt="de"> Deutsch</li>
<li><img src="images/ro_14.png" alt="ro"> Română</li>
<li><img src="images/br_14.png" alt="br"> Brasil</li>
<li><img src="images/tr_14.png" alt="tr"> Türkçe</li>
<li><img src="images/pl_14.png" alt="pl"> Polski</li>
<li><img src="images/pt_14.png" alt="pt"> Português</li>
<li><img src="images/ru_14.png" alt="ru"> Русский</li>
<li><img src="images/jp_14.png" alt="jp"> 日本語</li>
<li><img src="images/it_14.png" alt="it"> Italiano</li>
<li><img src="images/hu_14.png" alt="hu"> Magyar</li>
<li><img src="images/se_14.png" alt="se"> Svenska</li>
<li><img src="images/kr_14.png" alt="kr"> 한국어</li>
<li><img src="images/cn_14.png" alt="cn"> 中文</li>
</ul>
<p>More Languages ›</p>
</div>
jQuery
$(document).ready(function() {
$( "#langflag" ).hover(function() {
$( ".select-lang" ).slideToggle( 400, function() {
// Animation complete.
});
});
});
Fiddle here.
$( "#langflag" ).on('mouseenter', function() {
$( ".select-lang" ).slideToggle( 400, function() {
// Animation complete.
});
});
//keep it open if mouse is within #langflag, hide if mouse leaves both
$( ".select-lang, #langflag" ).on('mouseleave', function() {
if ($(this).attr('id') != 'langflag') {
$( ".select-lang" ).slideToggle( 400, function() {
// Animation complete.
});
}
});