I've been coding up a little responsive image slider to display my wedding photos using responsiveslides.js and a little script to deal with vertical images (it sets a max-height based on the browser viewport). You can see it at http://johnandalex.us/photos It's finally working pretty much how I want it to, with 2 exceptions:
The pics show up and then resize after a delay (when the browser window is smaller than the full size of the picture)
The prev/next arrows don't show up until the pics are completely loaded (which takes a while, especially on slower connections because there are over 100 images)
Any ideas for how to improve on these 2 items? I'm totally comfortable with HTML and CSS, but am a complete novice when it comes to JS.
Thanks.
I would hide the slideshow container until $(document).ready fires, then show the control. You can display a loader animated gif while the page is loading up.
EDIT:
Here is an example of how you could achieve this effect:
First you need to specify display:none on the UL that contains your slideshow:
<ul class="rslides rslides1" style="display:none;">
Next, show the slideshow container on document ready and init the plugin as you already have done:
$(document).ready(function () {
$(".rslides").show();
$(".rslides").responsiveSlides({
auto: false,
speed: 700,
timeout: 3000,
nav: true
});
});
You should always set a height and a width to images when possible.
Related
I'm working on a Wordpress theme for my blog and I have a kind of overlay-container. If you klick on a button it slides in from the top and pushes the whole page down.
I use jQuery for it, with this little code:
$(document).ready(function () {
// variables
var overlay = $('#layout-overlay'); // Overlay ID
// hide overlay-container
overlay.css({
display: 'block',
marginTop: -overlay.height()
});
...and more code...
As you can see, I just hide the container by assigning a negative margin-top depending on height of the container which itself depends on the content.
As long as I put together the layout, everything worked fine. Now that I started to put it into an actual Wordpress theme, the overlay-container is visible on page-load and page-reload on every page it is included. It may be just for some milliseconds, but it is clearly noticeable. It is there for the blink of an eye and then it is gone as it is supposed to be from the very beginning.
Any ideas how I can retime the whole thing?
I put the JS in the <head> tag and I made sure it is the first code to be fired.
If you want to get rid of the glitch, first set the overlay's regular CSS to display: none. If the problem occurs, try displaying it after the page is fully loaded using load.
Bit more about ready vs load:
jQuery - What are differences between $(document).ready and $(window).load?
i understand how to only show a div once the page has finished loading.
But cant get jQuery waterfall working correctly with this method.
So currently, jQuery waterfall orders some blog posts which are displayed as individual divs and each have an image as a 'thumbnail'. There are 16 of these divs displayed inside the container and each take up 1/16th of the space in a masonry grid.
However currently, when the page is loading, the divs are loaded as full width and then it seems like waterfall works to make them fit into the grid. This looks un professional in my eyes.
So the idea was, whilst the waterfall function is working its magic, simply display a loading icon and then once complete the div will be shown.
I have set the div as
display: none
And this is what is used for the jQuery waterfall:
$(window).load(function(){
$('#buildcontainer').waterfall({
colMinWidth: 250,
defaultContainerWidth: 1000,
autoresize: true
});
$("#buildcontainer").show();
});
In a sense, this works okay and the div is only shown once the page has finished loading.
However the actual waterfall grid function doesn't work now. The divs are simply loaded as they would be if i wasnt using waterfall.
Anyone have any ideas?
Sorted, simply has to fadeIn / show the containing div BEFORE waterfall was used on it!
The examples for waterfall suggest using document.ready:
$(document).ready(function(){
$('#buildcontainer').waterfall({
colMinWidth: 250,
defaultContainerWidth: 1000,
autoresize: true
});
});
$(function () {
$(".btn").on("mouseover",function(){
$(this).attr("src", $(this).attr("src").replace("images", "images/hover"));
});
$(".btn").on("mouseleave",function(){
$(this).attr("src", $(this).attr("src").replace("images/hover", "images"));
});
});
The above code is the way I change the image when the user hover on the button, when user click on it , it will redirect to other page. And the Html element is like:
<img class="btn" src="images/index_03.gif" />
The problem is , I am sure the path is correct , but when the user click on the button , during the time of loading the next page or in some case, when i hover on the image , the hovered image is not shown but broken link, why is it and how to fix it? Thanks for helping
$(this).attr("src", $(this).attr("src").replace("images/hover", "images"));
This code will reload the image, every time (or from cache).
So, during the page loading as other data is also loading at the same time, onhover image loading will be slow or broken.
I suggest you should load both images at the same time and at the same position and show/hide them on hover to get faster results.
Using CSS sprites instead of javascript calls will eliminate mouseover flickering, and reduce the total number of http requests required for your site (making it load faster).
You can achieve the same 'mouseover' functionality by using the css ':hover' pseudo element to alter the 'clip' property of the image (supported in IE6 and above).
Check out these CSS Tricks articles:
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them.
CSS Sprites with Inline Images
My bxSlider horizontally spans 100% of the browser width - multiple (image) slides display across the viewport, with "moveSlides: 1" set in the options.
A total of 8 slides are being rotated. As I click the "next" arrow to progress through them, something odd is happening at the end. As the 8th slide initially enters the viewport from the right and I continue clicking, there aren't any images displaying to the right of it UNTIL it's about cycle out again through the left side, at which point slides #1-3 suddenly appear where they should in the sequence. From there, the cycle repeats, with the same scenario occurring once slide #8 enters the viewport again.
Basically, I want slide #1 and so forth to appear to the right of slide 8 as soon as they're supposed to show up in the viewport, without this lag. After inspecting the CSS, I'm pretty sure it's a matter of the viewport calculation being off (specifically, the "left" position of .bx-viewport).
How can this specific calculation (the wrapping of the slide lineup) in jquery.bxslider.js be modified? Or is there another approach I should take, one that wouldn't require tweaking the viewport calculations?
I have included the code and replicated the issue here: http://jsfiddle.net/astewes/S7L2n/1/
I am using bxSlider with the following options:
jQuery(document).ready(function($){
$('ul#homepage.bxslider').bxSlider({
controls: true,
displaySlideQty: 5,
pager: false,
startingSlide: 0,
moveSlideQty: 1,
infiniteLoop: true,
preloadImages: 'all',
adaptiveHeight: true,
captions: false
});
});
EDIT: I've updated the list of the options I'm using. I've been able to reduce the above-mentioned delay, but the slider still behaves strangely when cycling back around to image #1. displaySlideQty has proven useful in reducing the lag time, although I'm not sold on the idea of relying solely on it. Space between slides is also off (for portrait-sized images), but this is likely because I'm using a combination of portrait and landscape. I've tried dynamically changing widths of the portrait images, but the use of display: table and display: table-cell (to center everything) made that approach useless.
I realize there's already been several questions like this, but I think my case is a little different.
I have an div that I am absolutely positioning and floating on top of the page, and I'm setting an overlay behind it to grey out the rest of the page. I have it working okay until you scroll up and down the page.
The problem is, when the div appears, it is still populating with ajax data. So the height and width of the bg overlay has already been set, but once all the data loads into the floating div, it sometimes pushing the page down so the height increases. So, I can't calculate the height and width of the window or document because the floating div might not be fully loaded yet, and once it does, it pushes the screen down further, causing the bg overlay to not cover the whole page.
So for example, in the code it's going something like:
loadBoxContent = function(){
..DO AJAX HERE..
..PUT CONTENT INTO FLOATING DIV..
$('#floatDiv').show()
$('#darkOverlay').height($(window).height());
}
I verified this by adding an alert, so that by the time I've clicked the alert, the bg overlay was able to calculate the true page size, and it looks fine.
Sorry, if this sounds confusing but hopefully you get what I'm trying to achieve. I'm assuming this isn't too difficult, but I haven't been able to figure it out.
Any help would be appreciated, I'm using jquery.
Thanks
Overlay ;)
** update, setting position of all corners to 0 instead of using width/height 100% **
$("<div/>")
.css({
position:"fixed", // ze trick
background:"#000",
opacity:.5,
top:0,
bottom: 0,
left:0,
right: 0,
zIndex: 2999 // everything you want on top, gets higher z-index
})
.appendTo("body");
Or put the above css settings in a css stylesheet (opacity needs cross browser hacks).
$("#dark-overlay").show();
Here is the solution :
JQuery Show Loading Plugin
Don't try to invent the wheel !!!
Here is a demo :
Loading Demo
Now you just need to create a main container div for your page and just ask this simple plugin to do it for you.
Maybe you want to read the plugin source and find how it works...