In implementing Easy Slider 1.7 with jQuery on a page of mine, I find that when the page first loads, both images in the ul slider display and then the slider loads properly and only the first slide is displayed.
What is the best way to correct this so that the slider div doesn't display until the script has loaded properly? I'm using this code to run it:
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
pause: 10000
});
});
You can just hide the content via CSS, like this:
#slider { display: none; }
Then show it on page load as well:
$(document).ready(function(){
$("#slider").show().easySlider({ auto: true, continuous: true, pause: 10000 });
});
To be safe I'd add a block to the page for non-JS users, could be a style sheet inside if you have a lot of these, otherwise just a style tag:
<noscript><style type="text/css">#slider { display: block; }</style></noscript>
I added the code below to my css to hide the images from being stacked up.
/*Added to hide stacking of images on IE 7/8*/
#slider{
height:227px;
overflow:hidden;
}
Related
I'm a jquery newbie trying to make my logo remain hidden and only appear when I scroll down.
The problem with the following jquery code is that it makes my logo appear when I load the site
The code only works as intended when I scroll once, however I want to make the jquery load the page with the image hidden. How can I fix the following code to accomplish this?
<script>
(function($) {
var $logo = $('.logo');
$(window).on('scroll', function() {
$logo.css({display: $(window).scrollTop() > 300 ? "block":"none"});
});
})(jQuery)</script>
You should load the css with that element hidden or withuot displaying it.
You can either do it directly from css (I recommend that) as:
.logo{
display: none;
// or
visibility: hidden;
}
Or, do it with jQuery as:
Above the var $logo = $('.logo'); add $('.logo').css('display','none');.
Then to make it visible again, $('.logo').css('display','block');.
Hope that helps!
I'm trying to slide in a div into the page while the page is loaded completely, I used CSS before, but it wasn't smooth at all, so i switched to use jQuery.
It's very smooth but i have a small issue which i believe somebody with more experience could solve it very quickly.
If you look at my output, the effect is not very seamless and it seems it stuck at some point.
Because i'm animating the div within change the width, i'm sure there is a better way to do that.
Here is my code :
$(document).ready(function() {
$("#thumbnails").animate({
opacity: 1,
width: "800px",
}, {
duration: 500,
specialEasing: {
width: "linear"
}
});
});
Here is the Output link
http://jsbin.com/cuvaxuji/1
Are you trying to slide the div ... for sliding make "#thumbnails" position absolute and write
$("#thumbnails").animate({
opacity: 1,
left: "20px",
}
I am using the carouFredSel jquery plugin for a website I'm making. I'm having some issues with the "prev", "next" and "pagination" containers. The images show up and start sliding but I cant navigate (prev/next) and I cant see the pagination itself..
You can see the page here: http://goo.gl/pJLNN
The slider is on the top. Caroufredsel is initialized in bbody.js upon DOM ready. Does anyone have any ideas?
In order to correct the images positions you need to add or change the absolute position of every image container.
Since the type of animation you chosen is Crossfade then all the images must be in top of each other to make it work, otherwise by default the are next to each other.
So in the css put this:
#rotate > div {
float: left;
display: block;
width: 100%;
height: 650px;
position: absolute;
left: 0;
}
To correct next and prev you need to make a small fix to the js, this is the correct way of calleing the buttons
prev: {
button : "#msprev"
},
next: {
button : "#msnext"
},
The same happens to pagination, correct it:
pagination: {
container: '#pager'
}
For anyone else facing this issue, another reason for the prev, next & pagination links not working is that the element IDs may have been duplicated somewhere else on your page. I had
prev: {
button : "#prev3"
},
next: {
button : "#next3"
},
There two elements with id="prev3 on the page. Same for id="next3". Once I changed the IDs to make them unique, the navigation started working correctly.
I have created 3 image galleries based on SlidesJS and placed them inside Twitter Bootstrap Tabs.
You can see the demo here.
As you can see, the galleries are correctly populated and placed inside the tabs; however, the images for the second and third galleries are not displayed.
I'm guessing this might be something with the content of the tabs being hidden and conflicting with the gallery css?
Do you have any solution?
Answer:
Based on the suggestion below, I ended up using it this way:
$(document).ready(function(){
$('#slides0').slidesjs({ width: 918, height: 200, navigation: false });
$("#gallery-tab a").each(function( index ) {
$(this).on('shown', function(){
$('#slides' + index).slidesjs({ width: 918, height: 200, navigation: false });
});
});
});
The most common problem with most tab scenarios is that you're initializing your galleries when the tabs are hidden, and therefore the plugin cannot calculate sizes and perform other actions on tab child elements which aren't visible.
You can 1) initialize the gallery plugin on tab select, or 2) use something like {position: absolute; left: -999em;} instead of {display: none} to hide tabs.
UPDATE: Based on your comment, this should work...
$('#gallery-tab a:first[data-toggle="tab"]').on('shown', function () {
$('#slides0').slidesjs({ width: 918, height: 200, navigation: false });
})
I'm using Flexslider to pull product images of varying sizes from an API. I've been throwing them into Flexslider's <ul>, but these varying image sizes don't play well. Flexslider nicely animates when images have different heights, but I want to have Flexslider have a fixed height and width to fit in my layout. I've tried putting the whole thing into a fixed-size <div>, but Flexslider ignores it completely and overflows into the rest of the layout. Is there some way to resize images to fit so that Flexslider doesn't resize?
Let's say you wanted a fixed size of 200px by 200px. Add these properties to the following selectors in the flexslider.css file and you should be good to go:
.flexslider {
width: 200px;
height: 200px;
}
.flexslider .slides img {
width: 200px;
height: 200px;
}
Hope this helps!
The element with the class ".flex-viewport" is the container of the slides, that element adapt his height to the taller image in the set, the trick is set all images height's to 0 except the one that is in the current slide which is inside the li element with the class ".flex-active-slide" that flexslider script toggle when slides exchange positions, the only bad thing about this trick is that the toggle of the class occurs after the new slide is put in the new position then a stutter occurs, but you can deal with that by using some javascript binding some toggleClass to the same event that trigger the slide change, help to be helpful.
.flex-viewport li:not(.flex-active-slide) img{
height: 0 !important;
}
Change the width via script say your width to be 400
$('.flex_up').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 400,
itemMargin: 5,
});
Remove
smoothHeight: true,
from
jQuery('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
prevText: "",
nextText: "",
slideshow: false,
smoothHeight: true,
animateHeight: false,
sync: "#carousel",
start: function(){
jQuery('#slider ul.slides img').show();
},
});
Set size with the style option of the specific div as below, with there is two slider with different size:
<div class="flexcontainer">
<div id="first-slider" class="flexslider" style:"width:100px">
<ul class="slides">
...
</ul>
</div>
<div id="second-slider" class="flexslider" style:"width:200px">
<ul class="slides">
...
</ul>
</div>
</div>