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 :)
Related
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();
}
});
My code is working fine when the user triggers a mouse over event, however I want to set a timer to animate without any trigger - like auto animating. How can I do that?
$(document).ready(function() {
$(".flip").flip({
axis: 'y',
trigger: 'hover'
});
});
<div class=" flip col-md-3">
<div class="flip">
<div class="front">
<div class="title">Front Wise</div>
</div>
<div class="back">
<div class="title">Back Wise</div>
</div>
</div>
</div>
This is the library: https://nnattawat.github.io/flip/
You need to set the trigger value to manual, check the doc
$(".flip").flip({
axis: 'y',
trigger: 'manual'
});
setTimeout( function() {
$(".flip").flip('toggle');
}, 100); //this will trigger the flip after 100 millisecond
Demo
$(document).ready(function() {
$(".flip").flip({
axis: 'y',
trigger: 'manual'
});
setTimeout(function() {
$(".flip").flip('toggle');
}, 5000); //this will trigger the flip after 100 millisecond
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.js"></script>
Flip below will be triggered in 5 seconds
<div class=" flip col-md-3">
<div class="flip">
<div class="front">
<div class="title">Front Wise</div>
</div>
<div class="back">
<div class="title">Back Wise</div>
</div>
</div>
</div>
i want to annimate 3 divs when the user scroll down the page, i followed many ttorials, it didn't work any suggestions how to do it, because the divs haz a defined css classes this is the divs . i wante them to fade up or down or any cool anniation how to acomplish this . please .
<section >
<div class="container">
<h1> PRODUITS </h1>
<div class="row">
<a href="pehdeauFrame.php">
<div id="mudivsho" class="col-md-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<h4 style="text-align:center;" class="adjst">Tubes PEHD pour Eaux </h4>
<img id="imgeaudiv" src="assets/images/diveau.jpg">
</div>
</div>
</div>
</a>
<a href="pehdTelecomFrame.php">
<div id="mudivsho" class="col-md-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<h4 style="text-align:center;" class="adjst">PEHD pour gaine Fibre Optique</h4>
<img id="imgeaudiv" src="assets/images/divtelecom.jpg">
</div>
</div>
</div>
</a>
<a href="http://www.mansouriplast.com/">
<div id="mudivsho" class="col-md-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<h4 style="text-align:center;" class="adjst">Tubes PVC</h4>
<img id="imgeaudiv" src="assets/images/divpvc.jpg">
</div>
</div>
</div>
</a>
</div>
</div>
</section>
I suppose you can find out how to make it on this website:
https://css-tricks.com/aos-css-driven-scroll-animation-library/
This javascript will allow you to move a div.
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
and this will allow you to make an object appear (fade) on scroll:
$('.back-to-top').css({"display": "none"});
jQuery(document).ready(function() {
var offset = 25;
var duration = 300;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
});
So, what you may want is:
$('#mudivsho').css({"display": "none"});
jQuery(document).ready(function() {
var offset = 25; /* pixels you have to scroll to the div show up (fade) [you can change] */
var duration = 300; /* Duration of the fade (you can change) */
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('#mudivsho').fadeIn(duration);
} else {
jQuery('#mudivsho').fadeOut(duration);
}
});
jQuery('#mudivsho').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
});
See if this works.
you can animate like this.
$("document").ready(function(){
$(window).scroll(function(){
$("#mudivsho1").animate({left: "10%",top: "30%",width: "20%",height: "30%",margin: "0 10%"}, 500);
$("#mudivsho2").animate({left: "50%",top: "50%",width: "40%",height: "30%",margin: "0 20%"}, 500);
$("#mudivsho3").animate({left: "100%",top: "70%",width: "80%",height: "30%",margin: "0 30%"}, 500);
});
});
Demo: http://codesheet.org/cs/ZWLNfwqa
https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav.html
How can I add 'active' class to the buttons?
Currently buttons have a button.secondary:hover & button.secondary:focus
to create a button background color change.
This is fine, except whenever clicking anywhere in the slider the focus is changed and so the background color is removed from the button.
I need the buttons to have a dedicated active state, so that clicking within the slider is possible.
Thanks
You can solve this with javascript or jQuery, here's a jQuery example:
$(document).ready(function() {
$('.button').on('click', function(){
$('.button').removeClass('active');
$(this).addClass('active');
});
});
This removes the 'active' class for all buttons when you click any element with the class 'button' and adds it to the one you're clicking.
After playing around for a long time, I came up with the solution.
Add #link as class in hash navigations, and one more additional class in this case "slidetabs" e.g. <a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
Get the current slide item and then its data-hash
Feed that data hash as a class in on changed function for adding class to navigation button
Then repeat same for change event to remove active class
Add a css to .slidetabs.active
$('.owl-carousel').on('changed.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).addClass('active');
});
$('.owl-carousel').on('change.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).removeClass('active');
});
Note: this is works as expected so I have not worked any further on it, there may be better solutions with good coding out there.
following is the full code:
Slider HTML:
<div class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">
<div class="item" data-hash="cowboy_coaster">
<!-- Slide Content -->
</div>
</div>
<div class="owl-item">
<div class="item" data-hash="night_tubing">
<!-- Slide Content -->
</div>
</div>
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
</div>
</div>
</div>
</div>
<div class="owl-nav">
<button type="button" role="presentation" class="owl-prev">
<img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-pre.png">
<div class="slider-counter">1 / 4</div>
</button>
<button type="button" role="presentation" class="owl-next"><img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-next.png"></button>
</div>
<div class="owl-dots disabled"></div>
<div class="owl-slider-tabs">
<ul>
<li>
<a class="dining slidetabs active" href="#dining">DINING</a>
</li>
<li>
<a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
</li>
<li>
<a class="cowboy_coaster slidetabs" href="#cowboy_coaster">COWBOY COASTER</a>
</li>
<li>
<a class="lift_tickets slidetabs" href="#lift_tickets">LIFT TICKETS</a>
</li>
</ul>
</div>
Javascript:
jQuery(document).ready(function($) {
$('.owl-carousel').on('initialized.owl.carousel changed.owl.carousel', function(e) {
if (!e.namespace) {
return;
}
var carousel = e.relatedTarget;
$('.slider-counter').text(carousel.relative(carousel.current()) + 1 + ' / ' + carousel.items().length);
}).owlCarousel({
nav:true,
navText: ["<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-pre.png'><div class='slider-counter'>1 / 3</div>","<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-next.png'>"],
loop:true,
slideSpeed : 300,
paginationSpeed : 400,
items:1,
dots:false,
URLhashListener:true,
startPosition: 'URLHash',
autoplay:true,
autoplayTimeout:9000,
autoplayHoverPause:true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:1,
nav:true
},
1000:{
items:1,
nav:true
}
}
});
$('.owl-carousel').on('changed.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).addClass('active');
});
$('.owl-carousel').on('change.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).removeClass('active');
});
});
CSS:
.slidetabs.active {
color: #ce2d27;
text-decoration: underline;
}
I am creating a sliding panel with jQuery on a home page with 5 panels with the code below.
<script type="text/javascript">
jQuery(function($) {
$('a.panel').click(function() {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active');
if (!$target.hasClass('active')) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: $this.width()
}, 500);
});
$target.addClass('active').show().css({
left: -($target.width())
}).animate({
left: 0
}, 500);
}
});
});
Currently I need to click to view a panel. Is there a way I can make the first panel show without clicking?
The HTML is:
<div class="panel" id="target1" >
<div class="inner blue">
<?php the_field( "dm" );?>
</div>
</div>
<div class="panel" id="target2">
<div class="inner green">
<?php the_field( "rd" );?>
</div>
</div>
<div class="panel" id="target3">
<div class="inner brown">
<?php the_field( "cd" );?>
</div>
</div>
..etc