We Keep Coding

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');
}
});

Get current image data Flexslider

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

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"
});
})

SlidesJS Autoplay not working

I am trying to make autoplay work on a simple SlidesJS carousel:
http://www.cycle22x.com/
I checked out some other threads that answer similar problems but the solutions provided aren't working? Here is the script that is included in the file:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/scripts/jquery.slides.min.js"></script>
<script>
$(function()
{
$('#slides').slidesjs(
{
play: 1000,
pause: 10,
hoverPause: true,
width: 960,
height: 540,
navigation:
{
effect: "fade"
},
pagination:
{
effect: "fade"
},
effect:
{
fade:
{
speed: 400
}
}
});
});
</script>
Any thoughts or ideas would be greatly appreciated.

you need to use auto: true to make it autoplay, like:
...
$('#slides').slidesjs({
width: 940,
height: 528,
play: {
active: true,
auto: true,
interval: 4000,
swap: true,
pauseOnHover: true,
restartDelay: 2500
}
});
See here:: Example Autoplay