Jquery slider to load images when ready with placeholder - javascript

OK so I have a Jquery plugin that works great and all except it puts all of the images on top of each other until the plugin has finished loading, and then they all go into place. Is there a way to have the first image be a placeholder for the size 843 w 345 h and have it load hidden until they are all ready so my page site doesn't expand down then back up when it has loaded. thanks!
$(window).load(function(){
$('#slide-me').carousel({
style: 'fade',
transitionSpeed: 'slow',
carouselSpeed: 3500,
arrows: true,
buttons: false,
buttonsTheme: 'lines',
stopOnHover: false,
carouselHeight: 'crop',
carouselWidth: 'crop'
});
});
html
<div id="slide-me">
<img src="/tour/images/bigslider1.jpg" />
<img src="/tour/images/bigslider2.jpg" />
<img src="/tour/images/bligslider3.jpg" />
<img src="/tour/images/bligslider4.jpg" />
<img src="/tour/images/bigslider5.jpg" />
</div>

Give it a try, worked for me:
$(function(){
setTimeout(function(){
$('#slide-me').carousel({
style: 'fade',
transitionSpeed: 'slow',
carouselSpeed: 3500,
arrows: true,
buttons: false,
buttonsTheme: 'lines',
stopOnHover: false,
carouselHeight: 'crop',
carouselWidth: 'crop'
});
},500);
});

I actually got the answer for this and wanted to share in case anyone wanted to see it.
In my css all that was needed to do was this
#slide-me img { display: none; }
#slide-me img:first-child { display: block; }
Which allowed the first image to be shown first and hide the rest while script loaded.

Related

owl carousel circular progress bar with classyloader gives a getContext error

I'm trying to create a circular progress bar around dots in owl carousel and ClassyLoader (https://andy.su/classyloader/). All fine but I got stuck with this error Cannot read property 'getContext' of undefined.
HTML
<div class="header-slider">
<div class="header-slider-1">
some slider content
</div><!-- .header-slider-1 -->
<div class="header-slider-2">
some slider content
</div><!-- .header-slider-2 -->
</div><!-- .header-slider -->
<div class="owl-dots" id="owldots">
<div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
<div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
</div>
JS
<script type="text/javascript">
/* ------------------------- Owl settings -------------------------- */
jQuery(function($){
$(document).ready(function() {
var timeout = 5000;
var owl = $('.header-slider').owlCarousel({
items: 1,
dots: true,
nav: false,
loop:true,
autoplay: true,
autoplayTimeout: timeout,
dotsContainer: '#owldots',
onChanged: function () {
$(function() {
var loader = $('.header-slider .owl-dot.active .loader').ClassyLoader({
width: 60,
height: 60,
percentage: 100,
speed: 20,
animate: true,
showRemaining: false,
showText: false,
diameter: 20,
lineColor: 'rgba(245,206,12,1)',
lineWidth: 2
});
})
}
});
});
});
</script>
Any idea how can I get this working?
There are several problems with your code, but the most important is: ClassyLoader must be instancied on a canvas, from the page you linked:
Next, you create the canvas element on which you want to trigger the plugin.
Also as I stated in a comment, $(function() { ... }); is an alias to $(document).ready(function() { ... });. And because in your code $ is an alias to jQuery, it can be simplified. I personnally prefer document ready syntax, it's more evident what it does for future readers.
NOTE: you'll see in the corrected codepen that you will probably have additional trouble with the CSS for your slides (they are not showing, probably conflict with owl carousel styles). I arbitrarily chose to set the canvas to fixed because it has to be a separate element and this will make it show upon the slides, but that can be improved. Note also that you need to use owl version 2 because of your syntax (changed your pen settings) and I directly copied ClassyLoader code because it doesn't work from filebin.
corrected code:
HTML:
<canvas class="header-loader"></canvas>
<div class="header-slider">
<div class="header-slider-1">
<p>some slider content 1</p>
</div><!-- .header-slider-1 -->
<div class="header-slider-2">
<p>some slider content 2</p>
</div><!-- .header-slider-2 -->
</div><!-- .header-slider -->
<div class="owl-dots" id="owldots">
<div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
<div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
</div>
JS:
$(document).ready(function() { //you can also use "$(function() {" instead
var timeout = 5000;
var owl = $('.header-slider').owlCarousel({
items: 1,
dots: true,
nav: false,
loop:true,
autoplay: true,
autoplayTimeout: timeout,
dotsContainer: '#owldots',
onChanged: function () {
//don't use "$(function() {" here!
var loader = $('.header-loader').ClassyLoader({ //changed the class
width: 60,
height: 60,
percentage: 100,
speed: 20,
animate: true,
showRemaining: false,
showText: false,
diameter: 20,
lineColor: 'rgba(245,206,12,1)',
lineWidth: 2
});
}
});
});

bxslider load jQuery on specific slide

I have BXSlider (https://bxslider.com/) installed. Now I want the following jQuery script to run on entering a "slide".
$(document).ready(function () {
$(".next-prev-nav").fadeTo( "slow", 1 );
$(".disable-slide-nav").hide();
});
(The script enables the navigation of the slider again.)
I tried to search the website of BXslider, but I couldn't find anything about it.
Hope someone can help me out.
You are looking for either onSlideBefore (executes immediately before each slide transition) or onSlideAfter (executes immediately after each slide transition - when transition completes) depending on your needs both can be found here - look at the section Callbacks.
Here is an example:
$(function(){
var slider = $('.bxslider').bxSlider({
mode: 'horizontal',
captions: true,
slideWidth: 600,
auto: true,
pause: 1000,
onSlideBefore: function () {
console.log('onSlideBefore');
// Your code either goes here or...
},
onSlideAfter: function () {
console.log('onSlideAfter');
// Goes here...
// For example lets turn the slider off after the second slide appears
slider.stopAuto();
}
});
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<div class="bxslider">
<div><img src="https://bxslider.com/assets/images/coffee1.jpg" title="Funky roots"></div>
<div><img src="https://bxslider.com/assets/images/coffee2.jpg" title="The long and winding road"></div>
<div><img src="https://bxslider.com/assets/images/coffee3.jpg" title="Happy trees"></div>
</div>

jQuery Fancybox trigger not working properly

I am opening fancybox automatic when page load and for this, I am using trigger method with a hidden link inside the page, The problem is fancybox popup loading but its missing overlay, just that overlay is not opening.
I am using fancyBox v2.1.5
This is the code I am using
$(".login_signup_lb").fancybox({
maxWidth: 450,
autoSize: true,
fitToView: true,
openEffect: 'none',
closeEffect: 'none',
closeBtn: false,
helpers: {
overlay: {
css: {
'background': 'rgba(0, 0, 0, 0.6)'
}
}
}
}).trigger("click");
This is the html code which is hidden in the page
<a id="login_signup" class="login_signup_lb fancybox.ajax" href="fileurl.html" style="display:none;">
Lightbox
</a>
Try to trigger after creating fancybox
$(".fancybox.ajax").eq(0).trigger('click');
Here is jsfiddle

Showing specific anchors for each pictures of a lightbox in URL bar

I have a lightbox where each pictures has an anchor.
But the anchor doesn't show the specific ID for each pictures, it appears like this in the URL bar :
www.mywebsite.com/gallery.php#example/1
www.mywebsite.com/gallery.php#example/2
www.mywebsite.com/gallery.php#example/3
So, I wonder if it's possible to show in the URL bar the specific ID :
www.mywebsite.com/gallery.php#bird
www.mywebsite.com/gallery.php#dog
www.mywebsite.com/gallery.php#cat
Any ideas ? Thanks.
Html
<ul class="thumbnails" id="my-gallery">
<li class="span2">
<a href="images/full/example-bird.jpg" class="thumbnail" id="bird">
<img src="images/thumbs/example-bird.jpg">
</a>
</li>
<li class="span2">
<a href="images/full/example-dog.jpg" class="thumbnail" id="dog">
<img src="images/thumbs/example-dog.jpg">
</a>
</li>
<li class="span2">
<a href="images/full/example-cat.jpg" class="thumbnail" id="cat">
<img src="images/thumbs/example-cat.jpg">
</a>
</li>
</ul>
Script
$('#my-gallery li a').iLightBox({
skin: 'dark',
path: 'horizontal',
fullViewPort: 'fill',
infinite: true,
linkId: 'example',
overlay:{
opacity: 1,
blur: false
},
controls: {
thumbnail: false
},
styles: {
nextOffsetX: -45,
prevOffsetX: -45
}
});
It's difficult to suggest an appropriate solution since I can't test iLightBox.
Referring to the iLightBox website, you could use the callback provided:
$('#my-gallery li a').iLightBox({
skin: 'dark',
path: 'horizontal',
fullViewPort: 'fill',
infinite: true,
linkId: 'example',
callback: {
onShow:function(api) {
$(location).attr("hash",$(api.currentElement).attr("id"));
}
},
overlay:{
opacity: 1,
blur: false
},
controls: {
thumbnail: false
},
styles: {
nextOffsetX: -45,
prevOffsetX: -45
}
});
I highlighted the lines I inserted. My approach is using the callback for the onShow-event of the iLightBox for changing the Hash with jQuerys $(location).attr("hash","value");.
The problem is that I'm not sure if onShow is the correct event to hook into and if currentElement is in fact the anchor or not. This is something you have to find out yourself. I'm sorry.
Edit
I think if you're doing it my way, you have to remove that linkId from your parameters.
Edit
I tried something on the test page you linked above.
This code works fine for me if I paste it into the console:
$('#deeplinking_looping_gallery li a').iLightBox({
skin: 'metro-black',
path: 'horizontal',
fullViewPort: 'fill',
infinite: true,
overlay: {
opacity: 1,
blur: false
},
callback: {
onBeforeLoad:function(api) {
$(location).attr("hash",$("#deeplinking_looping_gallery li").eq(api.currentItem).children("a").data("caption"));
}
},
controls: {
thumbnail: false
},
styles: {
nextOffsetX: -45,
prevOffsetX: -45
}
});
Edit
Loading an image at page load should be possible with this line of code:
$("a[data-caption='" + $(location).attr("hash").substr(1) + "']").trigger("click");
It triggers the click event for the appropriate anchor (like if you click it with your mouse).

Slider does not work in the jQuery Tabs

I want to use 2 jQuery Flexsliders in the jQuery tabs. The slider on the tab 1 works fine, but it does not work in the tab 2.
Here is the full demo of the code on JSFiddle:
Demo:
http://jsfiddle.net/vH5DT/
jQuery Code:
$(document).ready(function() {
$('#tabvanilla').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true
});
$('#flexslider1').flexslider({
animation: "slide",
slideshow: true,
controlsContainer: ".flex-container1",
directionNav: true,
controlNav: true
});
$('#flexslider2').flexslider({
animation: "slide",
slideshow: true,
controlsContainer: ".flex-container2",
directionNav: true,
controlNav: true
});
});
HTML:
<div id="tabvanilla">
<ul class="tabnav">
<li>Tab1</li>
<li>Tab2</li>
</ul>
<div id="tab1" class="cf">
<div id="flexslider1" class="flexslider">
<ul class="slides">
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
</div>
<div class="flex-container1"></div>
</div><!-- div#tab1 -->
<div id="tab2">
<div id="flexslider2" class="flexslider">
<ul class="slides">
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
<div class="flex-container2"></div>
</div>
</div><!-- div#tab2 -->
</div><!-- div#tabvanilla -->
There are a couple possible approaches to the problem that the slider script can't act on hidden elements--either re-initialize the slider script on each tab click, or use
position: absolute;
left: -999em;
and then
left: auto;
rather than
display: none;
for the tabs.
You'll need to init your flexslider when visible (on tab change)
I think you can do something like this :
$('#tabvanilla').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true,
select: function(event, ui) {
switch (ui.index) {
case 0:
// nothing to do since this is selected by default on page load
break;
case 1:
$('#flexslider2').flexslider({
animation: "slide",
slideshow: true,
controlsContainer: ".flex-container2",
directionNav: true,
controlNav: true
});
break;
}
}
});
I want to contribute with another solution that works fine for me.
I diving into the code and I use firebug to discover that Andres is right. The problem is because all hiddens at the beginning has their width setted to 0.
When I opened firebug everything works fine, hiddens take the right width.
Well, I do that:
I putted this piece of code after the click event and the transition:
fixWidth = $next_slide.css('width'); // I take the width of the new active slide
$flexslide_tab = $next_slide.find('.flexslider'); // Localize flexslider inside active tab
$ul = $flexslide_tab.find('.slides'); // Localize <li> container
$lis = $ul.find('li'); // Get all <li> elements
$lis.each(function(i,elem) {
$(this).css('width',fixWidth); // I adjust every <li> width from the new slide
});
I hope it will be useful.
May be this will be help for you..
Add this script to the first tab content page
$(window).load(function () {
initFlexSliders();
});
function initFlexSliders() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 100,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "fade",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel",
start: function (slider) {
$('body').removeClass('loading');
}
});
$('#carousel-1').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 100,
itemMargin: 5,
asNavFor: '#slider-1'
});
$('#slider-1').flexslider({
animation: "fade",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel-1",
start: function (slider) {
$('body').removeClass('loading');
}
});
}
for other tabs insert this at the bottom of the content.
initFlexSliders();

Categories