So I used a tutorial from codrops to create a carousel. I am not super savvy with JS or using anything JS related without reference code, so I merely adopted and modified the existing code from the tutorial. The issue that I am having is relating to the loopback. While using the carousel cycling through, the content works fine, but when you open one of the items and cycle through, it causes the carousel to get out of order.
Huge problem because items start disappearing when you press left-right. Anyone able to help on this one?
Below is the code I'm using on the site page.
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/js/jquery.carouFredSel-packed.js'></script>
<script type="text/javascript">
jQuery(function () {
jQuery('#leaderthumbs').carouFredSel({
synchronise: ['#leaderdetails', false, true],
auto: false,
width: '100%',
items: {
visible: 3,
start: 0
},
scroll: {
onBefore: function (data) {
data.items.old.eq(1).removeClass('selected');
data.items.visible.eq(1).addClass('selected');
}
},
prev: '#prev',
next: '#next'
});
jQuery('#leaderdetails').carouFredSel({
auto: false,
items: 1,
scroll: {
fx: 'fade'
}
});
jQuery('#leaderthumbs div').click(function () {
$('#leaderthumbs').trigger('slideTo', [this, -1]);
});
jQuery('#leaderthumbs div:eq(1)').addClass('selected');
});
</script>
Related
Im using jquery lazyload to load my images
but a part of my website has carouFredSel
when i click on next button the next images are not loaded because require to scroll the page, so is there any way to get images loaded on every slide?
jQuery(".foo4").carouFredSel({
auto: !1,
prev: ".prev4",
next: ".next4",
pagination: ".pager4",
mousewheel: !0,
swipe: {
onMouse: !0,
onTouch: !0
}
}),
above code is the javascript to slide the carousel and below I have my lazyscript
jQuery("img.lazy").lazyload();
Any help is very appreciated!
In carouFredSel, you provide the image url in data-src like
<img data-src="image-url"/>
So to show the image in you need to configure, in OnBefore of carouFredSel like.
scroll: {
onBefore: function( data ) {
var $current = data.items.visible.first(),
visible = data.items.visible,
src = visible.data('src');
visible.attr('src', src);
}
}
Add this lines in your carouFredSel code like
jQuery(".foo4").carouFredSel({
auto: !1,
prev: ".prev4",
next: ".next4",
pagination: ".pager4",
mousewheel: !0,
swipe: {
onMouse: !0,
onTouch: !0
},
scroll: {
onBefore: function( data ) {
var $current = data.items.visible.first(),
visible = data.items.visible,
src = visible.data('src');
visible.attr('src', src);
}
}
});
I believe I solved this issue for lazy loading images with caroufredsel
$('#youtube-playlist').carouFredSel({
width: '100%',
height: "variable",
circular: false,
infinite: false,
responsive: true,
items: {
visible: {
min: 2,
max: 4
}
},
onCreate: function(data) {
// Swap data-src for first 4 items
// console.log(data);
$(this).find("img[data-src]").each(function (i, item) {
$(this).attr('src', $(this).attr('data-src')).removeAttr('data-src');
return i < data.items.length-1;
});
},
scroll: {
onBefore: function(data) {
// Lazyload next visible thumbnails
// console.log(data.items.visible.length);
for ( i = 0; i < data.items.visible.length; i++ ) {
var $img = data.items.visible.eq(i).find('img');
$img.attr('src', $img.attr('data-src') ).removeAttr('data-src');
}
}
},
align: 'center',
auto: false,
prev: '#prev',
next: '#next'
});
onCreate : find first visible images and swap data-src to src attribute.
Scroll onBefore : Iterate through the next visible items and swap attributes.
Inspect the Network [filter img] tab in chrome dev tools and watch as the lazyload happens.
I tried adding a width value to my items to remove the console log notice from caroufredsel but it doesn't like the lazyload onCreate.
I'm using fullpage.js to create my website, and I'm trying to incorporate wow.js and animate.css to create some cool animations. Everything is working fine on desktop, but when I resize the browser to mobile-size, I cannot scroll at all. The animations at the top of my page load, but I cannot scroll at all until I resize to a bigger viewport.
I've tried the 'scrollOverflow: true' on fullpage, but it's not working.
This is what my app.js looks like:
$(document).ready(function() {
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: false,
live: true // default
}
)
wow.init();
$('#fullpage').fullpage({
navigation: true,
navigationPosition: 'left',
navigationTooltips: ['Home', 'About Me', 'Skills', 'Portfolio', 'Contact', 'Hire Me'],
resize: false,
scrollBar: true,
scrollOverflow: false,
//RESPONSIVE
responsiveWidth: 800,
afterResize: function () {
if ($(window).width() < 800) {
//$.fn.fullpage.setAutoScrolling(false);
var verticalNav = document.getElementById("fp-nav");
$(verticalNav).hide();
}
}
});
});
I've tried the 'scrollOverflow: true' on fullpage, but it's not working.
And... why are you using it? The purpose of it has nothing to do with your problem... so you should turn it off...
I figured out the problem....
I had overflow: hidden !important on both my html and body in my CSS. Took them off and they both work now.
Thanks for the help Alvaro!
THEY WORK
I am using FullPage.js, scrollOverflow and WOW Animations altogether and they work perfectly fine.
HERE ARE MY SETTINGS
In the HEAD ELEMENT I have these Links
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
And at the bottom before the ending BODY tag I have all these scripts.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/vendors/scrolloverflow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.min.js"></script>
<script>
/*** Call function after page has loaded ***/
$(document).ready(function() {
/*** Call FullPage.js option ***/
pageScroll();
new WOW().init();
$(window).resize(function() {
pageScroll();
});
});
/*** FullPage.js Function ***/
function pageScroll(){
$('#fullpage').fullpage({
sectionsColor: ['#06C', '#C06', '#930', '#06C'],
anchors: ['aa', 'bb', 'cc', 'dd'],
menu: '.menu',
navigation: true,
scrollOverflow: true,
scrollBar:true,
fixedElements: '.header',
paddingTop: '3em',
slidesNavigation: true,
paddingBottom: '1em'
});
}
</script>
Here is a live working site.
https://cleansites.us/
What I am trying to do is load in a portfolio item on the click of a div that pertains to that portfolio item. It will load the portfolio single page and populate the view. However the slick slider is not being instantiated and does not work when loaded via ajax.
This is the code that instantiates the slick slider (usually wrapped in $(document).ready. If I enter it in the console after it the ajax gets loaded it works, however if I add it to the end of the .click() function (which will load the content via ajax) it seems to not be intantiated - and nothing in the console to tell me why not:
$('.slick-slider').slick({
lazyLoad: 'ondemand',
centerMode: true,
centerPadding: '60px',
variableWidth: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Then here is my code for the click of
$(document).ready(function() {
$('#gallery-view > div').click(function() {
var toLoad = $(this).attr('id')+' #portfolio-single';
$('#ajax-view').hide('fast',loadContent);
$('#load').remove();
$('#ajax-wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
//window.location.hash = $(this).attr('id').substr(0,$(this).attr('href'));
function loadContent() {
$('#ajax-view').delay(1000).load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#ajax-view').show('normal',hideLoader());
}
function hideLoader() {
$('#load').delay(1000).fadeOut('normal');
}
});
});
The link for which I am trying to accomplish this can be found at:
http://april.philiparudy.com/gallery/
If you click on a div with a circle image you will see it loading without slick slider.
I have the single slick slider working here: http://april.philiparudy.com/portfolio/abby-warner/
Is there some type of callback function I could be running to instantiate the slick slider after ajax is loaded?
Your code it's almost ok. The problem is you are assigning the click to the #gallery-view > div.
You must get an existing element, not an element you have added after the function click.so try to change that and get the parent or show me the ajax call to see where are you adding the new item.
Also change the click to onclick and the functions should not be inside the $(document).ready
Take a look below.
$(document).ready(function() {
$('#gallery-view > div').on('click', function() {
var toLoad = $(this).attr('id')+' #portfolio-single';
$('#ajax-view').hide('fast',loadContent);
$('#load').remove();
$('#ajax-wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
});
});
function loadContent() {
$('#ajax-view').delay(1000).load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#ajax-view').show('normal',hideLoader());
}
function hideLoader() {
$('#load').delay(1000).fadeOut('normal');
}
Hope it's helps!
I try to add content on the fly to a CarouFredSel slider. The content is inserted fine but CourFredSel does not recognize the new content. Is there a way to tell the slider that the slide count has changed?
jQuery(document).ready(function() {
jQuery('#carousel').carouFredSel({
items: 4,
direction: "left",
responsive: true,
infinite: false,
circular: false,
scroll: {
items: 2,
duration: 1000
},
next: {
button: "#slider-button-next",
key: "right",
onBefore: function () {
loadAdditionalContent();
}
},
prev: {
button: "#slider-button-prev",
key: "left"
},
auto: {
play: false
}
});
});
function loadAdditionalContent () {
jQuery('#carousel').trigger('insertItem', ['<img src="http://dummyimage.com/200x200" class="added" />']);
}
Here is a fiddle that describes the problem: http://jsfiddle.net/bg0xyj8k/
there is nothing wrong with your code:
fix this in jsfidle: use external reference without https: http://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js
I did some changes in your code, did not understanding what are you trying to do there.
jQuery( "#slider-add-items" ).click(function() {
loadAdditionalContent();
});
function loadAdditionalContent () {
id++;
jQuery('#carousel').trigger('insertItem', ['<img src="http://dummyimage.com/200x200" class="added" id="'+ id +'" />']);
}
http://jsfiddle.net/bg0xyj8k/2/
UPDATE
- be more precise when you are asking someting
FIX 1: insert at next click before fist visible element - http://jsfiddle.net/bg0xyj8k/3/
FIX 2: insert on last position of the slider when next clicked - http://jsfiddle.net/bg0xyj8k/4/ - result => infinite next click
We have a tool that allows people to add code to a dynamic page.
A bit of code (a widget) needs to be injected into the DOM, not hard coded into the html. I use jquery to do it. The problem is that it ends up redirecting the page...
I need to solve this.
Here is an example. Create a page with the following:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#doInsertW').click(function(){
var wCode = $('#inputWidget').val();
$('#putWidget').html(wCode);
});
});
</script>
<input id="inputWidget" /><button id="doInsertW" type="button">Insert</button>
<div id="putWidget"></div>
Then paste this into the input and you'll see what I mean:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('twitter').start();
</script>
The problem is that the widget.js script uses document.write to place the HTML for the widget on the page. If document.write is called while the page is still loading, it works fine. However, calling document.write after the page has finished loading will rewrite the entire page.
Here is a quick and dirty hack that will force it to work (tested in FireFox):
$(function(){
document.write = function(c) { $('#putWidget').append(c) };
$('#doInsertW').click(function(){
var wCode = $('#inputWidget').val();
$('#putWidget').html(wCode);
});
});
Notice, I'm simply overriding the document.write function after the page is done loading.