Develop Reference

onclick of 2nd image should become active (i.e. make a next() call)

I am displaying 2 images in a slider one beside another with next and previous icons.
Not able to add one more scenario i.e. onclick of 2nd image in the slider should make a next() call and so on in flexslider.
Example:
Slide#1 is active and Side#2 is semi active image, onclick of "Slide#2" semi-active image area it should become "active" and "Slide#3" should be semi active image and so on.
Demo JSFiddle:
https://jsfiddle.net/pkuwhvqm/
HTML:
<div class="outerWideSlider">
<div class="wideSlider">
<div class="flexslider" data-startat="0">
<ul class="slides">
<li>
<img alt="" src="https://www.solodev.com/assets/flexslider/slide1.jpg">
<div class="text-caption">
<div class="inner">
<h2>Slide #1</h2>
<p>This is the text for slide #1</p>
</div>
</div>
</li>
<li>
<img alt="" src="https://www.solodev.com/assets/flexslider/slide2.jpg">
<div class="text-caption">
<div class="inner">
<h2>Slide #2</h2>
<p>This is the text for slide #1</p>
</div>
</div>
</li>
<li>
<img alt="" src="https://www.solodev.com/assets/flexslider/slide3.jpg">
<div class="text-caption">
<div class="inner">
<h2>Slide #3</h2>
<p>This is the text for slide #1</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Javscript:
$(document).ready(function () {
$(".wideSlider").each(function () {
var $this = $(this);
var $slider = $this.find(".flexslider");
var startat = $slider.attr("data-startat");
if (startat = 0) {
}
$slider.flexslider({
animation: 'slide',
easing: 'linear', // // Default: swing {NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
// useCSS: false, // Default: true
slideshow: false, // Default: True //Boolean: Animate slider automatically
slideshowSpeed: 7000, // Default: 7000 // Integer: Set the speed of the slideshow cycling, in milliseconds
animationLoop: true, // Default: true
startAt: startat,
controlNav: false,
directionNav: true,
nextText: " ",
prevText: " ",
start: function (slider) {
// $('.wideSlider .text-caption').fadeOut(100);
// var $s = slider.slides.eq(slider.currentSlide);
// $s.find('.text-caption').show();
},
before: function (slider) {
// $('.wideSlider .text-caption').hide();
},
after: function (slider) {
// var $s = slider.slides.eq(slider.currentSlide);
// $s.find('.text-caption').show();
}
});
});
})

Just add the below handler. https://jsfiddle.net/g1mteokv/
$("li").click(function(){
if($(this).prev().hasClass("flex-active-slide")){
$(".flex-next").click();
}else if ($(this).next().hasClass("flex-active-slide")){
$(".flex-prev").click();
}
});

Slick slider - Adding active class to first < a > in currently open foundation tab

Trying to add an active class to the first a tag within a selected tab.
My code is adding the active class to the very first element in slide one and doing exactly what I want within slider one but then when I change tabs it is still adding the active class to the navigation on the first slider not slider 2 that is in view.
JS
$(document).ready(function(){
var $slideshow = $(".slider").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
$('.links').on('click', 'a', function( e ) {
var slideIndex = $(this).closest('li').index();
$slideshow.slick( 'slickGoTo', parseInt( slideIndex ) );
$('.links li a').removeClass('slick-current');
$(this).addClass('slick-current');
e.preventDefault();
});
//Re draw slider when data tabs change
$('[data-tabs]').on('change.zf.tabs', function() {
$('.slider').slick("setPosition", 0);
$('.slider').slick("slickGoTo", 0);
});
$('.slider').on('afterChange', function(event,slick,i){
$('.links li a').removeClass('slick-current');
$('.links li a').eq(i).addClass('slick-current');
});
// document ready
$('.links li a').eq(0).addClass('slick-current');
});
HTML
<div class="sidebar-nav">
<ul class="tabs vertical" id="example-vert-tabs" data-tabs>
<li class="tabs-title is-active">Tab 1</li>
<li class="tabs-title">Tab2</li>
</ul>
</div>
<div class="tabs-panel is-active" id="panel1v">
<div class="large-12 columns">
<div class="large-3 columns page-content-left">
<ul class="links">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
</div>
<div id="" class="large-9 columns page-content-right">
<section class="slider" id="slider1">
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</section>
</div>
</div>
</div>
<div class="tabs-panel" id="panel2v">
<div class="large-12 columns">
<div class="large-3 columns page-content-left">
<ul class="links">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
</div>
<div id="" class="large-9 columns page-content-right">
<section class="slider" id="slider2">
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</section>
</div>
</div>
</div>

Your problem is that the listeners are set for both sliders. You have to create each slider individually. I'd say the simplest solution is to create a jQuery function that handles all that.
So with your HTML, the code necessary would about look like so (it's not perfectly optimized but easy to read)
// create a new jQuery function
$.fn.extend({
createTabSlider: function() {
var $self = $(this)
// $self is the tab, to get an element you DONT use $('something')
// you use $self.find("something")
var $slideshow = $self.find(".slider").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
})
$self.find(".links").on("click", "a", function(e) {
var slideIndex = $(this).closest("li").index()
$slideshow.slick("slickGoTo", slideIndex)
})
$slideshow.on("afterChange", function(event, slick, i) {
$self.find(".links li a").removeClass("slick-current")
$self.find(".links li a").eq(i).addClass("slick-current")
})
$self.find(".links li a").eq(0).addClass("slick-current")
}
})
// create a slider for each tab
$("#panel1v").createTabSlider()
$("#panel2v").createTabSlider()

You can try using on function in id rather than class and remove and add class referring from parent element i.e. panel2v or panel1v. and dont forget to use on function for both slider. Hope it works.

Slick can't handle multiple sliders being instantiated together. You need to instantiate the sliders individually using ids.
var $slideshow1 = $("#slider1").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
var $slideshow2 = $("#slider2").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
You should still be able to hook in your events to both at once using the classes though.

toggle opacity and reload div

I have a tabbed system on my page. Currently when clicked the opacity is toggled to show that div using:
$('.tabs').tabs({ fx: { opacity: 'toggle', duration: 'slow'} });
which is loaded in a javascript in the head of the page. I am trying to add an on-click event handler so that the div is also reloaded but it is having no effect, how can I get it to do both?
<div class="tabs">
<ul>
<li>Time Sheets</li>
<li>Abscence Request</li>
<li>Abscence Record</li>
</ul>
<div class="clear"></div>
<div class="bordered_box">
<div id="tabs-0"><?php include('timesheets.php'); ?></div>
<div id="tabs-1"><?php include('abscencerequestform.php'); ?></div></div>
<div id="tabs-2"><?php include('abscencerecords.php'); ?></div>
</div>
<script type="text/javascript">
$(function () {
$("a#tabs-0").on("click", function () {
$("#tabs-0").load("timesheets.php");
});
$("a#tabs-1").on("click", function () {
$("#atabs-1").load("abscencerequests.php");
});
$("a#tabs-2").on("click", function () {
$("#atabs-2").load("abscencerecords.php");
});
});
</script>

If I understand correctly, you want to have the tab content reloaded as you select each tab?
Just point your tabs directly to the PHP content, which will force load it each time the tab for a particular page is clicked. JQuery will build the panels for you, so you only need this code below instead of the contents of <div class="bordered_box"> :
<div id="tabs">
<ul>
<li>Time Sheets</li>
<li>Abscence Request</li>
<li>Abscence Record</li>
</ul>
</div>
This is just a simulated example, since I can't load active PHP scripts here:
$(function() {
$( "#tabs" ).tabs({
fx: { opacity: 'toggle', duration: 'slow'},
activate: function(event ,ui){
//console.log(event);
alert("Simulating refreshed PHP content in Tab #" + ui.newTab.index());
}
});
});
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>Time Sheets</li>
<li>Abscence Request</li>
<li>Abscence Record</li>
</ul>
</div>

I don't know much about PHP, but I do know that jQuery can chain methods, try this:
$('#tabs').tabs(function(event) {
fx: { opacity: 'toggle', duration: 'slow'};
$(this).find('a').bind('click', function(event) {
var link = $(this).attr('href');
$(window).load(link);
});
event.stopPropagation();
});
I'm sure there's something that's not right...

JQuery isotope with Swipe plugins - problems reload elements

I am using the jQuery Isotope and Swipe plugin for a Photo gallery. I want to reload all the items when i close the gallery Swipe but there is a problem. All the items aren't reload very well and when i try to select a new category of items, they just split far from the others. I try lot of things like isotope('reloadItems'), isotope('reLayout') but without success.
I don't know where the problem come.
This pages will show you what i mean : http://digitale-photographie.fr/portfolio.php
Also, code samples:
portfolio.php
<div id="sort">
Tous
Soirée
Mariage
Portrait
Grossesse
Publicité
Industrie
</div>
<div id="photogrid">
<?php
for ($j=0;$j<=$i-1;$j++)
{
$image_mini = '<img src="photos/portfolio/thumbnails/'.$tab_image_mini[$j].'" />';
echo '<div class="thumbnail '.$tab_class[$j].'" data-background="photo.image.large"><a class="thumb">'.$image_mini.'</a></div>';
}
?>
</div>
<div id="mainimage">
<div id='photos' class='swipe'>
<div class='swipe-wrap'>
<?php
for ($j=0;$j<=$i-1;$j++)
{
echo '<div class="img '.$tab_class[$j].'" data-image="photos/portfolio/zoom/'.$tab_image_zoom[$j].'" data-width="1024" data-height="702">
<div class="ui photoinfo hidden">
<!-- Photo Title & Description -->
<h2 class="phototitle">Runaway...</h2>
<!-- Metadata -->
<ul class="metadata"></ul>
</div>
</div>';
}
?>
</div>
</div>
<div class="ui button backbutton hidden">
<div class="chevron">
<div class="upper"></div>
<div class="lower"></div>
</div>
<p>Retourner à la galerie</p>
</div>
<div class="ui photonav button prev hidden">
<div class="chevron">
<div class="upper"></div>
<div class="lower"></div>
</div>
</div>
<div class="ui photonav button next hidden">
<div class="chevron">
<div class="upper"></div>
<div class="lower"></div>
</div>
</div>
</div>
js code
$(document).ready(function() {
$(window).load(function(){
var $container = $('#photogrid');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
$('#sort a').click(function(){
var selector = $(this).attr('data-filter');
/*$('.img').isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});*/
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
});
// hide photo view with back button
$('.backbutton').click(function() {
// Hide photo layer and current photo
mainimageElement.removeClass('visible black');
$('.ui').addClass('hidden');
if (isTouchDevice()) {
headerElement.removeClass('hidden');
}
$('#photogrid').isotope( 'reloadItems' ).isotope();
mainimageElement.removeAttr('style');
thumbnailElements.removeAttr('style');
sortElement.removeAttr('style');
headerElement.removeClass('opaque');
setHeaderOpacity();
// put selected thumbnail back in its place
retractThumbnail(selectedThumbnail);
retractThumbnail(selectedSort);
setTimeout(function() {
// animate in other thumbnails
var delay = 0;
thumbnailElements.each(function() {
delay = delay + 10;
var $this = $(this);
setTimeout(function() {
$this.removeClass('background');
}, delay);
});
}, 1)
});
Thanks for helping :)

Using append and document.write, slider run and doesnot run

I use list_carousel slider to run posts with HTML like that :
<div class="list_carousel">
<div id='gallary'>
<ul id='foo3'>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
I use document.write, slider run ok.
<div class="list_carousel">
<div id='gallary'>
<script>
document.write('<ul id="foo3">');
document.write('<li>A</li>');
document.write('<li>B</li>');
document.write('<li>C</li>');
document.write('<ul>');
</script>
</div>
</div>
But when I use innerHTML, slider does not run :
<div class="list_carousel">
<div id="gallary">
</div>
document.getElementById('gallary').innerHTML = " <ul id='foo3'>..... </ul>";
</div>
Slider run with call :
<script>
$("#foo3").carouFredSel({
auto: false,
responsive: true,
scroll: 1,
mousewheel: true,
items: {
visible: 3,
width: 200
}
});
</script>
Say me reason why and solution for this.