I am trying to use scrollify for my website (Wordpress, woocomerce) www.chame-lemon.com and I'm totally green in programming, so I really need your help guys.
I need to disable the plugin on shop page and product pages, I'm using a class named "hwdp" to all sections on the pages when I want to use plugin. but he is activated on other pages because of the footer (it has a class to turn on scrollify also) but I can't use two separate footers in Wordpress, so I need to use code with using a function
$.scrollify.disable();
The disable method turns off the scroll snap behavior so that the page scroll like normal.
there is documentation for that plugin
https://projects.lukehaas.me/scrollify/#methods-continued
that should look like that:
if there is no class named hwdp on the page
the plugin should be disable
else
he should be enabled
and I tried to fix that by myself, I spend hours and i got no results... and i know that's a very simple thing for someone who knows jquery.
<script>
jQuery(document).ready(function($) {
$.scrollify({
section : ".hwdp",
interstitialSection: ".footer",
easing: "easeOutExpo",
scrollSpeed: 1200,
offset: 1,
scrollbars: true,
standardScrollElements: "",
setHeights: true,
overflowScroll: true,
updateHash: true,
touchScroll: false,
before:function() {},
after:function() {},
afterResize:function() {},
afterRender:function() {},
});
if (!$('section').hasClass('.hwdp')) {
$.scrollify.enable();
}else{
$.scrollify.disable();
}
});
</script>
In your code, the plugin is being initialized on every page regardless of whether it finds the .hwdp class. It's better to only be initialized when it needs to be.
Here's how you can enable the plugin only when there exists a section on the page with the class .hwdp.
<script>
jQuery(document).ready(function($) {
if($('section.hwdp').length) {
$.scrollify({
section : ".hwdp",
interstitialSection: ".footer",
easing: "easeOutExpo",
scrollSpeed: 1200,
offset: 1,
scrollbars: true,
standardScrollElements: "",
setHeights: true,
overflowScroll: true,
updateHash: true,
touchScroll: false,
before:function() {},
after:function() {},
afterResize:function() {},
afterRender:function() {},
});
}
});
</script>
Related
Scenario :
When the page is rendering the products are shown and every product has a discover button. On clicking the button I want to display the gallery / slider images below that product.
Currently, when I click the first product, Swiper is showing the images. And, if I slide the images to 3rd or 4th (or any), the new product slider image is starting from that particular index i.e., from 3rd or 4th.
The configuration I used for Swiper is :
public config: SwiperConfigInterface = {
centeredSlides: true,
initialSlide: 0,
slidesPerView: 1,
loop: false,
spaceBetween: 0,
autoplay: false,
direction: 'horizontal',
keyboard: false,
navigation: true,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
hashNavigation: false,
effect: 'slide'
};
And, the discover button is calling the below method :
discover(locationId) {
this.locationImages = [];
this.destinations.forEach(selectedData => {
if(selectedData._id == locationId){
selectedData.optional_images.forEach(image => {
this.locationImages.push(image)
});
}
});
console.log(this.locationImages);
}
I searched the docs and google, didn't find any reliable solution. Please suggest some answers. Thank you in advance.
Check the documentation at https://swiperjs.com/swiper-api - seems that you can use swiper.slideTo(index, speed, runCallbacks) method to revert to first (or any) slide element whenever you need, like upon changing the active product.
I'm working in a Reveal.js presentation, for future needs I'm wrapping it around an Ionic 2 app.
First approach is working fine, what I've done is a simple sidemenu template with a page that loads the Reveal.js presentation.
At first it seems to work fine, but:
issue: First time I open the Reveal.js page, it loads ok, but If I'm loading another page, and then returning to it, it doesn't load the presentation.
Example:
https://github.com/xanisu/ionic2-reveal.js
reveal.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import * as Reveal from 'reveal.js/js/reveal';
#Component({
selector: 'page-reveal',
templateUrl: 'reveal.html'
})
export class RevealPage {
reveal : any;
loaded : boolean = false;
onstructor(public navCtrl: NavController) {
}
ngOnInit() {
console.log("ngOnInit!");
this.reveal = Reveal;
this.loadSlides();
}
loadSlides() {
//this function is intended to load all dinamic content for slides (json, bbdd, webservice....)
this.revealInit();
}
ionViewDidLeave() {
this.loaded = false;
}
revealInit() {
this.reveal.addEventListener( 'ready', ( event ) => {
this.loaded = true;
});
let revealOptions = {
controls: true,
progress: true,
slideNumber: false,
history: false,
keyboard: true,
overview: true,
center: true,
touch: true,
loop: false,
rtl: false,
shuffle: false,
fragments: true,
embedded: false,
help: true,
showNotes: false,
autoSlide: 0,
autoSlideStoppable: true,
autoSlideMethod: Reveal.navigateNext,
mouseWheel: false,
hideAddressBar: true,
previewLinks: false,
transition: 'slide', // none/fade/slide/convex/concave/zoom
transitionSpeed: 'default', // default/fast/slow
backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom
viewDistance: 3,
parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"
parallaxBackgroundHorizontal: null,
parallaxBackgroundVertical: null
};
this.reveal.initialize(revealOptions);
}
}
reveal.html
<div class="reveal">
<div class="slides">
<section>Single Horizontal Slide 1</section>
<section>
<section>Vertical Slide 2.1</section>
<section>Vertical Slide 2.2</section>
</section>
<section>Single Horizontal Slide 3</section>
</div>
</div>
As far as I know, in your Reveal.js version (3.5.0) you can only use the Reveal.initialize() once. This github feature request is the only info I could find about it.
In the 4.0.0 Reveal.js version there is a new feature called Multiple Presentations so now you can create multiple instances of the Reveal class and initialize a new one each time you enter the page.
Even though we don't want to have multiple presentations side to side, this solved my problem when revisiting the same page won't load the Reveal slides again.
A brief example of how you can store your <div class="reveal presentation">...</div> in a new instance of Reveal could be something like this:
ngOnInit() {
console.log("ngOnInit!");
let presentation = new Reveal(document.querySelector('.presentation'));
presentation.initialize();
}
I built an image slider using the carouFredSel plugin and everything works fine with one single carousel of images but as I continued building out my site I've reached some problems.
The first visible carousel works fine, but if you click the IMG link on the top right to see the second carousel, it neglects the bit of code telling it to only display one item at a time or something like that.
I've made sure everything is set up the same in both and I've tried experimenting with display and float changes with no luck
I'm also now realizing that it seems to be caused by the fading transition because the same thing happens on the first slider when I set a fade in to that as well.
Guessing it has something to do with the display change that the jQuery script does
http://coreytegeler.com/new/#work
Any ideas??
$("#web-carousel").carouFredSel({
width: "100%",
height: 450,
direction: "right",
circular: true,
infinite: true,
items: {
visible: 1,
width: "variable",
height: 400,
width: 720
},
scroll: {
duration: 1000,
pauseOnHover: true
},
auto: {
timeoutDuration: 9999,
delay: 5000
},
prev: {
button: "#web-left",
key: "left"
},
next: {
button: "#web-right",
key: "right"
},
pagination: {
container: "#web-pagination",
keys: true
},
swipe: true,
mousewheel: false
});
I'm not sure if this is what's causing you trouble, but it sounds like it might be the same issue I ran into. I have my carousel in a hidden div revealed by an animate() triggered by a click. It wasn't rendering correctly until I put the carousel initialization into a post-animate function -- ensuring that the carousel wasn't initialized until the div was ready seemed to be the key, probably because the carousel code looks at the sizing of things when it's preparing the images. So what I did was to wrap the carousel initialization in a function:
var do_carousel = function() {
$('#carousel').carouFredSel({
responsive: true,
circular: false,
etc...
Then in the code that reveals the div, it calls that function:
$("#carousel-div").animate({
opacity: 'toggle',
width: 'toggle',
}, 1200, function() {
do_carousel();
});
Once I moved the carousel initialization there, it started working. I hope perhaps that will help you find the root of your issue.
I am using Wistia player with a playlist and am trying to figure out how I can make the video player responsive? I would like to have it re-size appropriately based on the screen size. As seen here
http://wistia.github.io/demobin/video-foam/
My current code is fairly straight forward and uses their iframe implementation:
<div id="wistia_1n6492l8d4" class="wistia_embed" style="width:947px;height:388px;" data-video-width="640" data-video-height="360"> </div>
<script charset="ISO-8859-1" src="http://fast.wistia.com/static/concat/E-v1%2Cplaylist-v1%2Cplaylist-v1-bento%2Csocialbar-v1.js"></script>
<script>
wistiaPlaylist = Wistia.playlist("1n6492l8d4", {
version: "v1",
theme: "bento",
videoOptions: {
volumeControl: true,
autoPlay: true,
videoWidth: 640,
videoHeight: 360,
videoFoam: true
},
media_0_0: {
autoPlay: false,
controlsVisibleOnLoad: false
},
plugin: {
"socialbar-v1": {
buttons: "twitter-googlePlus-facebook",
logo: "true",
badgeUrl: "http://www.mysite.com/mediacenter",
badgeImage: "http://embed.wistia.com/deliveries/d58d182a894d86aaa3689db801dae4ebcaeca63a.jpg?image_crop_resized=100x20"
}
}
});
</script>
It loads the player as expected... But then in about three incremental steps the player re-sizes down to be very very small... about 30px x 20px
It's almost as if the iframe goes through several media queries and sizes down after it loads?! Not sure exactly... So close yet so far!
Thank you for helping!!!
Right now, videoFoam isn't dialed in for playlists - I know it is something Max wants to go back and work on, but it is not top of the priority list at this moment.
To help fix the incredible shrinking video, I would recommend moving the videoFoam: true param from your videoOptions object to the top level object:
version: "v1",
theme: "bento",
videoFoam: true,
videoOptions: {
volumeControl: true,
autoPlay: true,
videoWidth: 640,
videoHeight: 360,
},
...
Feel free to reach out to our support email: help#wistia.com, if we can be further helpful!
The videoFoam options is not available for the Playlist, but we could achieve that with some css tricks,
iframe.wistia_playlist {
max-width: 100%;
}
choose BENTO theme
Source : http://leopathu.com/content/wistia-responsive-playlist
Is it possible to embed a video via javascript like vimeo & moogaloop, but for blip.tv?
Their documentation seems unclear about how to do it, they have no example and I couldn't find any by googling for about 40 minutes..
Thanks, S.
I finally came across a solution for what I wanted to do. If anybody is ever interested about it, here it is: (i'm using mootools)
function blipEmbed(episodeId) {
var swf_id = 'embeddedPlayer';
var moogaloop = new Swiff('http://blip.tv/scripts/flash/stratos.swf', {
id : swf_id,
container : 'playerHolder', /* the container's id where the swf will be embedded, i used a div */
fullScreen: true,
width : 1000,
height : 500,
vars : {
file: "http://blip.tv/file/"+episodeId+"?skin=rss",
autostart: true,
allowm4v: true,
showstrands: false,
showguidebutton: false,
showplaylist: false,
showsharebutton: false,
showmorebutton: false,
showfsbutton: false,
removebrandlink: true,
showinfo: false,
useoldendcap: false,
enablejs: true
}
});
}
/* and for the callback, blip forces you to use this function*/
function getUpdate(changeType, param1, param2){
if (changeType=="complete") {
// when the video is done playing, do something
}
}