Get current image data Flexslider - javascript

Is it possible to extract data from the current Flexslider image, like image ID, URL and name? I need to print the current image URL outside the flexslider div.
The code I'm using now:
jQuery('#slider').flexslider({
animation: "fade",
animationSpeed: 0,
controlNav: false,
animationLoop: false,
smoothHeight: true,
slideshow: false,
keyboard: true,
touch: true,
directionNav: true
});
Many thanks in advance


You can use the after trigger which triggers after the slide changes:
jQuery('#slider').flexslider({
after: function { // Code that fetches the needed data goes here },
animation: "fade",
animationSpeed: 0,
controlNav: false,
animationLoop: false,
smoothHeight: true,
slideshow: false,
keyboard: true,
touch: true,
directionNav: true
});
A functioning demo is found here: Jsfiddle

Related

Flexslider continue on pop up

How do i make the flexslider continue to rotate on any screen pop up or when browser not in focus?
My code used:
// Flex Slider for Homepage
$('#home-flexslider .flexslider').flexslider({
animation: "fade",
slideshowSpeed: 5000,
animationSpeed: 1500,
pauseOnHover: false,
directionNav: true,
controlNav: false,
keyboardNav: true,
start: function (slider) {
slider.removeClass('loading');
}
});

Remove Snap Back in OwlCarousel when using SinglePage setting

Currently I am experiencing a snap back from the last image to the first when OwlCarousel reaches the last image. I would prefare it to continuously repeat in the same direction.
Is there a setting for this?
Currently the code is:
g.owlCarousel({
navigation: false,
slideSpeed: 500,
items: 1,
pagination: false,
loop: true,
mouseDrag: false,
touchDrag: false,
autoPlay: true,
singleItem: true
});

How to set default tab for initial load

Currently this webpage opens to the tab, "Freebies & Extras." I want it to open to the first tab, "Commonwealth & Council." I believe, by default, it will open to the first tab. I tried to locate where it is telling the browser to open it on the third tab but couldn't find it.

I think this is the code you are looking for:
$('div#Panels').tabs({
active: 2,
The active option tells the tab control which tab to display.
If you change the active value to 0 (or remove it altogether), it should display the first tab on page load.
Since the activtate event is not triggered for the initially displayed tab, you could move the code from the activate event handler into a separate function, and then call that function both in the activate event handler and when the page first loads.
<script>
$(document).ready(function() {
function activateTab(index) {
switch (index) {
case 0:
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel"
});
//-----------------
$(window).resize();
//-----------------
break;
case 1:
$('#carousel2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: '#slider2'
});
$('#slider2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel2"
});
//-----------------
$(window).resize();
//-----------------
break;
}
}
$('div#Panels').tabs({
active: 0,
collapsible: false,
activate: function(event, ui) {
activateTab(ui.newPanel.index());
}
});
activateTab(0);
});
</script>

You need to set the active to 0 in the code
$(document).ready(function() {
$('div#Panels').tabs({
active: 2,
collapsible: false,
activate: function(event, ui) {...
UPDATE
When you click the tab 0, then the page runs this code:
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel"
});
//-----------------
$(window).resize();
//-----------------
Since you are not clicking this tab to start, this code is not running when the tab opens. You need to run the code by yourself. I suggest create a function and call it right after defining the tabs.
The full script would be (maybe something is misplaced, because I haven't run it):
function ClickedTab(carousel, slider){
$(carousel).flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: slider
});
$(slider).flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: carousel
});
//-----------------
$(window).resize();
//-----------------
}
$(document).ready(function() {
$('div#Panels').tabs({
active: 0,
collapsible: false,
activate: function(event, ui) {
switch (ui.newPanel.index()) {
case 0:
ClickedTab("#carousel", "#slider"); break;
case 1:
ClickedTab("#carousel2","#slider2"); break;
}
}
});
ClickedTab("#carousel", "#slider")
})

How to use multiple flexslider in different events

I am using two flexsliders on same page but in different events. Both flexsliders works fine. But second slider has some jerk for first time when the click event triggers.
$('#slider').flexslider({
animation: "slide",
easing: "swing",
direction: "horizontal",
controlNav: true,
asNavFor: '#slider2',
directionNav: true
});
$('.HowItWorks').click(function(){
$('#slider2').flexslider({
animation: "slide",
easing: "swing",
direction: "horizontal",
controlNav: true,
directionNav: true ,
sync: "#slider"
});
})

Javascript slider jquery

<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
controlNav: false,
animation: "fade",
startAt: 0,
slideshow: true,
slideshowSpeed: 7000,
});
});
</script>
Why doesn't my slider work? I copy pasted it from an other script so I am clueless where to start.

Delete the comma after slideshowSpeed: 7000, and you are good to go ;)

Categories