Flex Slider Teaser thumb image slider - javascript

/* Flex Slider Teaser */
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "fade",
animationLoop: true,
controlNav: "thumbnails",
start: function(slider) {
jQuery( '.flexslider' ).removeClass('loading');
}
});
});
i am using flex slider but in bottom side thoumbnil images is not showing in slider .\
i checked by http://flexslider.woothemes.com/thumbnail-slider.html
but it is not working , where should i edit in js ?? my code JS code is written above.

Can you show what HTML you are using in the slider? You need a data-thumb attribute in each slide that references to the actual thumbnail images.
For example:
<li data-thumb="images/thumb1.jpg">
<img src="images/slide1.jpg" />
</li>

Related

Owl Carousel - Navigation Buttons move all sliders in the page

I have multiple Owl Carouse sliders in a page. The problem is that when I use the control button from one slider it moves all the sliders in the page.
I initialize the sliders based on a unique id using this function
function property_slider_v2(slider_id){
console.log('we do '+slider_id);
jQuery('#'+slider_id).owlCarousel({
loop:true,
margin:0,
nav:true,
items:6,
dots:false,
mouseDrag:true,
video:true,
autoHeight: true,
autoWidth:true,
stagePadding:0,
// rtl:true,
navText : [
'<i class="fas fa-arrow-left"></i>',
'<i class="fas fa-arrow-right"></i>'
],
});
}
the html markup looks like this (page is in php)
$slider_id='property_slider_carousel_elementor_v2_'.rand(1,99999);
.....
<div class="owl-carousel owl-theme " id="'.$slider_id.'" data-auto="">
......
</div>
print'<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
property_slider_v2("'.$slider_id.'");
});
//]]>
</script>';
Beside the "one button controls all" issue all the sliders works as they should.
So problem in the hashListener function in the OwlCarousel plugin.
When you create your html and you don't need hash navigation - dont put attributes data-hash="..." to your html markup for carousel items.

bxslider load jQuery on specific slide

I have BXSlider (https://bxslider.com/) installed. Now I want the following jQuery script to run on entering a "slide".
$(document).ready(function () {
$(".next-prev-nav").fadeTo( "slow", 1 );
$(".disable-slide-nav").hide();
});
(The script enables the navigation of the slider again.)
I tried to search the website of BXslider, but I couldn't find anything about it.
Hope someone can help me out.
You are looking for either onSlideBefore (executes immediately before each slide transition) or onSlideAfter (executes immediately after each slide transition - when transition completes) depending on your needs both can be found here - look at the section Callbacks.
Here is an example:
$(function(){
var slider = $('.bxslider').bxSlider({
mode: 'horizontal',
captions: true,
slideWidth: 600,
auto: true,
pause: 1000,
onSlideBefore: function () {
console.log('onSlideBefore');
// Your code either goes here or...
},
onSlideAfter: function () {
console.log('onSlideAfter');
// Goes here...
// For example lets turn the slider off after the second slide appears
slider.stopAuto();
}
});
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<div class="bxslider">
<div><img src="https://bxslider.com/assets/images/coffee1.jpg" title="Funky roots"></div>
<div><img src="https://bxslider.com/assets/images/coffee2.jpg" title="The long and winding road"></div>
<div><img src="https://bxslider.com/assets/images/coffee3.jpg" title="Happy trees"></div>
</div>

JQuery Cycle plugin - Slideshow

I'm using JQuery cycle plugin to make a slideshow in HTML. I believe that I have done everything right but it's not in an actual slideshow frame, the pictures are just below eachother like this:
I'm asking for a fresh pair of eyes and brain to help fix this :)
Oh! Almost forgot, here's my code:
<script src="Scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.cycle.all.js" type="text/javascript"></script>
<script src="js/modernizr-2.5.2-respond-1.1.0.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/twitter_search.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/xml">
</script>
<div id="Slide#1">
<script type="text/javascript">
// BeginOAWidget_Instance_2827522: #OAWidget
$(window).load(function() {
$('#slider').flexslider({
namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin
selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
animation: "slide",
easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction: "horizontal", //String: Select the sliding direction, 'horizontal' or 'vertical'
reverse: false, //{NEW} Boolean: Reverse the animation direction
animationLoop: false, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight: true, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: 5000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds
initDelay: 0, //{NEW} Integer: Set an initialization delay, in milliseconds
randomize: false, //Boolean: Randomize slide order
useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available
touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
keyboard: true, //Boolean: Allow slider navigating via keyboard left/right keys
mousewheel: false, //Boolean: Allow slider navigating via mousewheel
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: "Pause", //String: Set the text for the "pause" pausePlay item
playText: "Play", //String: Set the text for the "play" pausePlay item
startAt: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: true, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
controlsContainer: "", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: "", //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
// Carousel Options
itemWidth: 0, //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin: 10, //{NEW} Integer: Margin between carousel items.
minItems: 0, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems: 0, //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move: 0, //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
});
});
// EndOAWidget_Instance_2827522
</script>
<div id="main-container">
<p> </p>
<div id="main" class="wrapper clearfix">
<!-- FlexSlider -->
<div id="container">
<div id="slider" class="flexslider">
<ul class="slides">
<li> <img src="images/1.png" /> </li>
<li> <img src="images/2.png" /> </li>
<li> <img src="images/3.png" /> </li>
</ul>
</div>
<div id="carousel" class="flexslider" style="display:none;">
<ul class="slides">
<li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_donut.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_donut.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li>
</ul>
</div>
</div>
</div>
<!-- #main -->
</div>
<!-- #main-container -->
</div>
If for some reason this isn't displaying correctly, here's a pastebin :)
http://pastebin.com/Zq5Xww6k
Thanks in advance,
CMNatic
I'm unfamiliar with this plugin but from the effects, it looks like the html and javasrcipt are not enough, looks like you are missing css,
for example here are the basics
.slides {
position: relative;
height: 200px; /*height required*/
width: 500px /* width required*/
}
.slides li {
position: absolute;
top: 0; left: 0;
}

jquery cycle trigger event on slide change not before or after

I'm using the jquery cycle1 plugin for a slideshow with fade transitions between images, no previous or next controls. I need to layer text on top of this slider that changes color based on what slide is showing.
I'm not very fluent in jQuery so I'm having a hard time using the documentation to manipulate the available options. I've gotten this far thanks to this post and this one but the color changes slightly before or after depending on if I use before or after, obviously. How can I make the text color change at the same exact time the slide does?
Note: I have to use the cycle 1 plugin as my site uses jQuery 1.3.2 with no hope of upgrading.
here is a fiddle, and code below. Thanks in advance for any help!
here is my html:
<div id="text">this is some text over the slider</div>
<div id="switch-it">
<div id="slide1">
<a href="link1.html">
<img src="hp_hero_010114_01.jpg" height="500" width="980" border="0" />
</a>
</div>
<div id="slide2">
<a href="link2.html">
<img src="hp_hero_010114_02.jpg" height="500" width="980" border="0"/>
</a>
</div>
</div><!--//END switch-it-->
and here is the jQuery
$(document).ready(function(){
$('#switch-it').after('<div id="switch" class="switch">').cycle({
fx: 'fade',
speed: 800,
timeout: 500,
cleartypeNoBg: true,
height:'500px',
width:'980px',
pager:'#switch',
pause:1,
before: function (prev, current, opts) {
var current_id = $(current).attr('id');
if( current_id.match("slide1")){
$('#text').css('color','white');
}
else if( current_id.match("slide2")){
$('#text').css('color','red');
}
else if( current_id.match("slide3")){
$('#text').css('color','blue');
}
else if( current_id.match("slide4")){
$('#text').css('color','green');
}
},
pagerAnchorBuilder: function(index, el) {
return '•'; // whatever markup you want
}
});
});
It's not very elegant, but adding a timeout inside the before for half of your speed makes the change exactly in the middle of your transition.
setTimeout(function () { ...change text color }, 400);
JSFiddle
EDIT OR
Add a transition to your css for the #text for the same amount of time as your speed
#text {transition: color .8s linear}
JSFiddle
You might want to update to Cycle2 plugin it has what you are looking for
link
Down in "misc. bits" look for the state variable named 'busy';

Get size of Image when jQuery accordion applied

It seems like in jQuery when an element is not visible width() returns 0.
when I remove the accordion the height is reported correctly. I tried wrapping the images in a div and setting the div's display to block , but this didn't work either.
is there any alternative to find image original size when accordion applied?
<div id="accordion">
<h3>Click me</h3>
<div>
<div class="bg">
<img src="your_img_url">
</div>
</div>
<h3>Click me</h3>
<div>
<div class="bg">
<img src="your_img_url"/>
</div>
</div>
</div>
$(document).ready(function() {
$('#accordion').accordion({
autoHeight: false,
collapsible: true,
});
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
Setting a specific width and height on the images will return that width and height. This can be done in CSS or using the width and height attributes on the <img> element.
Changing your images to <img src="your_img_url" style="height: 20px; width: 20px;"> should work.
If you need original width, you could do something like this:
var img = $('img').clone().appendTo('body').hide();
img.load(function () {
alert($(this).width());
alert($(this).height());
});
This answer has more detailed information on how to get the original size.
Works for me!
Do you have accordion plugin?
if not: http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
is it added to script?
yo should remove last , to collapsible: true,
it sould look like this:
$(document).ready(function() {
$('#accordion').accordion({
autoHeight: false,
collapsible: true
});
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
But it works anyways!

Categories