I'm using two Cycle slideshows with a single pager and different effects on each slideshow (with the metadata plugin).
I would also like to animate the first slide of each slideshow as documented here, but I'm having trouble with the syntax.
This is my current js
$(document).ready(function() {
$('.slideshow').each(function(index) {
$(this).cycle({
pager: '#pager',
pagerAnchorBuilder: function(i) {
if (index == 0)
// for first slideshow, return a new anchro
return ''+(i+1)+'';
// for 2nd slideshow, select the anchor created previously
return '#pager a:eq('+i+')';
}
});
});
});
The effects are coded on the .slideshow divs (with the metadata plugin)
<div class="slideshow { fx: 'scrollRight', timeout: 0, cleartypeNoBg: true, speed: 750, easing: 'easeInOutBack' }">
<div class="slideshow { fx: 'scrollLeft', timeout: 0, cleartypeNoBg: true, speed: 750, easing: 'easeInOutBack' }">
Related
Target
On click "Open menu" button:
Dim overlay appearing with fade-in animation
Once dim overlay animation done, from the top, dim overlay is appearing with the sliding animation from the top to bottom:
Solution attempt and problem
<template>
<transition #enter="animateOpening" #leave="animateClosing">
<div
class="SearchProductsPane-DimUnderlay"
v-if="isOpen"
:ref="elementsReferencesIDs.overlay"
>
<div
class="SearchProductsPane-Body"
:ref="elementsReferencesIDs.body"
>
<!-- ... -->
</div>
</div>
</transition>
</template>
import { Vue, Component } from "vue-property-decorator";
import Animation from "animejs";
#Component
export default class SearchProductsPane extends Vue {
private elementsReferencesIDs: Record<"overlay" | "body", string> = {
overlay: "Overlay", body: "Body"
};
private animateOpening(_element: Element, done: () => {}): void {
Animation
.timeline({
easing: "linear",
duration: 500,
complete: done
})
.add({
targets: this.$refs[this.elementsReferencesIDs.overlay],
opacity: [0, 1]
})
.add({
targets: this.$refs[this.elementsReferencesIDs.body],
translateY: "100%"
})
}
private animateClosing(): void {
}
}
With current solution, the .SearchProductsPane-Body will move from the normal position to the downward outside of the screen. Instead of it, I need it move from the upward outside of the screen to it normal position.
I tried reach it by adding of below class:
.SearchProductsPane-Body__InitialPosition {
transform: translateY(-100%);
}
However, the animejs animation starts from the 0%, not -100%. How to change it?
You can use From Value in animeJs, which allows you to define you'r animation origin:
anime.stagger(100, {from: 'center'})
you'r options are:
first: animation starts from the first element(Default from value)
last: animation starts from the last element
center: animation starts from the center
index: you choose which element the animation starts from
here is the docs.
Or you can use From to which forces the animation to start at a specified value.
In you'r code:
anime({
targets: '.SearchProductsPane-DimUnderlay'
});
docs here
how can I do 5 photos instead of 3, how to change their size, how to do that they will be change automatically becouse now I have to press play to start?
html:
<script>
$(function () {
// Unstyled Example
$.monte('#example1');
// Styled Buttons Example
// (see the CSS in the above style block)
$.monte('#example2', {auto:false});
// Callback Example
// Format and append the HTML:
$('#example3 > img').each(function(){
$(this)
.wrap('<div style="position:relative"/>')
.parent()
.append('<div><p>' + $(this).attr('alt') + '</p></div>')
.append('<img src="frame.png" alt="" class="frame"/>');
});
// Hide the text on all but the center slide:
$('#example3 div div').css({opacity: 0}).eq(0).css({opacity: 0.8});
// Using the callbacks to reveal and hide the text:
$.monte('#example3', {
auto:false,
callbackIn: function () {
$(this[0]).find('div').animate({opacity: 0.8}, 450);
},
callbackAway: function () {
$(this[0]).find('div').animate({opacity: 0}, 450);
}
});
});
</script>
Here is link to the source where I found it [https://github.com/paizai/monte][1]
I have some problem in my program two slides are working automatically but I want two slides have two move same and also i don't want any delay beteween two slides
Please help me
Thanks for help
var mySwiper = new Swiper('#first-slider',{
loop:true,
grabCursor: true,
autoplay: 2500,
simulateTouch: false,
transitionSpeed: 1000,
var mySwiper1 = new Swiper('#second-slider',{
loop:true,
grabCursor: true,
autoplay: 2500,
simulateTouch: false,
transitionSpeed: 1000,
});
in this two sliders;
when it is moving i have some delay between thease two sliders
delay means first of all first slider is moving after that second slider is moving I don't want that
I want two slides have two move same path without any delay
So as a workaround, don't set both sliders on a timed interval.
Only set the first slider to autoplay.
Then in the onSlideChangeStart, trigger the second one to slide, like thins:
var mySwiper = new Swiper('#first-slider',{ loop:true, grabCursor:true,
autoplay: 2500, simulateTouch: false, transitionSpeed: 1000,
onSlideChangeStart: function(swiper, direction) {
mySwiper1.slideNext();
} });
var mySwiper1 = new Swiper('#second-slider',{ loop:true, grabCursor:
true, simulateTouch: false, transitionSpeed: 1000});
This way your swiper will just do its thing, but the second one depending on the first, so they will ALWAYS move together...
Use this snippet to try, and accept answer if it is what you wanted :)
var mySwiper = new Swiper('#first-slider',{ loop:true, grabCursor:true,
autoplay: 2500, simulateTouch: false, transitionSpeed: 1000,
// Navigation arrows
onSlideChangeStart: function(swiper, direction) {
if (typeof mySwiper1 != "undefined"){
mySwiper1.slideNext();
}else{
alert("PageLoad");
}
}
});
var mySwiper1 = new Swiper('#second-slider',{ loop:true, grabCursor:
true, simulateTouch: false, transitionSpeed: 1000});
.swiper-container {
width: 100px;
height: 100px;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.6/css/swiper.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.6/js/swiper.jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.6/js/swiper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container" id='first-slider'>
<!-- Additional required wrapper -->
<div class="swiper-wrapper" >
<!-- Slides -->
<div class="swiper-slide" style="background-color:red">Slide 1</div>
<div class="swiper-slide" style="background-color:green">Slide 2</div>
<div class="swiper-slide" style="background-color:yellow">Slide 3</div>
</div>
</div>
<!-- Slider main container -->
<div class="swiper-container" id='second-slider'>
<div class="swiper-wrapper" >
<!-- Slides -->
<div class="swiper-slide" style="background-color:green">Slide 1</div>
<div class="swiper-slide" style="background-color:yellow">Slide 2</div>
<div class="swiper-slide" style="background-color:blue">Slide 3</div>
</div>
</div>
Also, for you to play around with:
http://jsfiddle.net/yuayL7zq/2/
Here is a fiddle i made, to try my ideas.
The problem is that I had two sliders with sliding time interval 2500. In this case, two sliders are working fine without any delay during fist time. After that if I open two or more new tabs in my browsers, and then go to my webpage. Now there is a delay between two sliders.
Below is the code I had used for slide function,
var mySwiper = new Swiper('#first-slider',{
loop:true,
grabCursor: true,
autoplay: 2500,
simulateTouch: false,
transitionSpeed: 1000,
onSlideChangeStart: function(swiper, direction) {// my task will go here...}
});
var mySwiper1 = new Swiper('#second-slider',{
loop:true,
grabCursor: true,
autoplay: 2500,
simulateTouch: false,
transitionSpeed: 1000,
});
I can sure that whenever I reload the page two sliders are working fine with same time interval. I had this problem whenever I moved to new tab and come back to my webpage.Is there any mistake in the two sliders that cause delay between sliders? -Thanks for help
I made a video gallery with magnific popup.
But unlike the imagegallery, the videogallery doesn't show a counter e.g. 1/3 at the bottom right of the video. Why not? In the imagegallery it works well.
Code of the Videogallery:
$('.gallery_video').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: true,
fixedContentPos: false,
gallery: {
enabled:true
},
callbacks: {
lazyLoad: function(item) {
console.log(item); // Magnific Popup data object that should be loaded
}
}
});
});
Code of imagegallery:
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: true,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
},
callbacks: {
lazyLoad: function(item) {
console.log(item); // Magnific Popup data object that should be loaded
}
}
});
Both scripts don't specify a counter so why isn't it showing up on both?
thank you
It has been a time ago when this was asked but a full anwser:
You have to add or specify the iframe markup.
You also want to add some small css updates for positioning the counter.
var $attachmentContainers = $('.js-attachments-in-gallery');
$attachmentContainers.magnificPopup({
delegate: 'a',
type: 'image',
gallery:{
enabled:true,
},
iframe: {
markup:
'<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'<div class="mfp-bottom-bar">'+
'<div class="mfp-counter"></div>'+
'</div>'+
'</div>'
}
});
.mfp-iframe-scaler .mfp-bottom-bar {
margin-top: 4px; }
Figured it out - for the iframe type you have to specify that you want a counter:
$(this).magnificPopup({
.....
iframe: {
markup: '<button title="Close (Esc)" type="button" class="mfp-close">×</button>'+
'<div class="mfp-counter"></div>'
}
I had rendered a list using SENCHA.Now i want to navigate to different screen/load different screen upon clicking the item in LIST.
var templist = new Ext.List( {
title:"xmli",
itemTpl : '{ename}',
floating: true,
indexBar: true,
width: 350,
height: 370,
centered: true,
store:xmlStore,
modal: true,
onItemDisclosure: {
scope: 'test',
handler: function(record, btn, index) {
// I need to a load different page here how ?.
// ChangePage();
}
},
hideOnMaskTap: false
}).show();
Please help me how can we achieve this using SENCHA.
Thanks,
Shyam
You need to put this list inside a layout where you can switch the visible component to your different page. It sounds like you could use the card layout:
http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html