I design websites using HTML/CSS and i just recently started using jQuery to add to my designs. i've been stripping code apart from different questions similar to mine but never helpful enough, im not just not experienced enough with the program. I'm basically looking for a way to have 3-images cycle by fading into each other over and over. That's it, it would go like this:
1)website loads/image 1 fadeIn
2)wait 5 seconds
3a)image 1 fadeOut 'fast'
3b)image 2 fadeIn (this is to not show the background between images when they're fading)
4)repeat until last image fadeIn
5)smoothly loop back into image 1
I would totally appreciate the help
Use jquery cycle plugin with fade effect: http://jquery.malsup.com/cycle/browser.html
Related
My website for architectural visualization: http://www.greenshell3d.com
I noticed on the networking tab / incognito it takes 15 seconds or so to load the above-the-fold content. (most notably the image slideshow.)
Some of the images in the slideshow load at the very end instead of the beginning of the website load process. Now I understand the browser handles this order, but perhaps there is another way. As it stands, the bounce-rate is too high and I expect it is because of load time.
I've seen a jquery snippet on github that allows one to control the order of image loads - do you think this is a good option? I'd be glad to hear any opinions before investing the time to fix this.
Any ideas? Thanks!
You said you are interested in any opinions as well, so first some general thoughts: There is no page fold. The web that we produce content for exists in so many different screen sizes + resolutions that it’s impossible to say "The fold is below this big image!". Yes, Google changed the pagespeed insights tool to make people load stuff on top of the page first, but I think their wording there is really bad.
Now to your image loading issue:
The first thing I would recommend is to reduce the size of all the images. They seem to be around 280 - 300 kb per image and you have a few of them. Since there is a translucent overlay over them anyways you can probably get away with reducing the image quality without people noticing it (because they don’t see the image directly). Play around with the values here.
I would then look into optimizing the code for the slider to load the first image first, then the rest of the page and the other images asynchronously maybe after that. Another trick could be to increase the slide fade time from the first slide to other slides so the slider doesn’t change if the next image isn’t ready yet. You said you found a jQuery script to implement that, that’s where I’d start.
As a general guideline: the position of requests in the source code usually determines the load order of things on the page. If your images are requested by JavaScript at the end of the page, that lead to the images being loaded later than you want them to be loaded.
I'm coding an app around video content and am currently playing around with HTML5's fullscreen API (I know it is still in very early stage).
Because of what my application does, the video itself isn't the only part that goes fullscreen: several elements alongside go fullscreen too, and I have noticed a great drop in performance there. The video streams ok, but other graphical elements suddenly get painfully slow. For example, a hover style typically takes about a good half second before showing up. A simple change in subtitles (I use popcorn.js) causes the video to freeze for a fraction of a second.
Any one knows why this is so? Do you experience the same? Thanks for your precious feedback.
I am trying to setup a "rotating image" for part of a site I am working on. I have taken many photos of a single item (30+), and I want to display them like it is a rotating 3D image (with a possible draggable speed).
One approach I have taken is setting it as a CSS background, and looping through the images every 0.1s. It works alright, but it flickers like crazy until the image has done a full rotation (I am assuming this is because the image is not yet cached)
Has anyone implemented something similar or have a suggestion?
Much appreciated.
jQuery Cycle is an amazingly versatile, light-weight, jQuery plugin.
http://jquery.malsup.com/cycle/
On a couple pages of mine I have a Fancybox lightbox and I have a jQuery Cycle Plugin. Normally it works fine. There are instances when I click the link that creates a lightbox then when I close it the Cycle Plugin transitions and does not come back. It makes a huge gap of space when this happens.
I am not sure what is going on, this does not happen 100% of the time. Its sporadic. I am unsure if this is a one browser issue or multiple browsers as I was able to recreate this in FF5 on two different machinces but have not replicated this in other browsers.
Any Advice?
Thanks - Here is the page: http://www.ubhape2.com/artists/ (note: any artist page has this same header and happens on all of them. The fancybox is any link referencing "Choosers")
Found out an answer to those who have similar issues (this answer came from the Fancybox forums):
After further tests, I figured out what the issue is and it happens when you open and close Fancybox quickly and successively it seems that the animation behind (jQuery cycle) is creating something called "animation queue buildup" (http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup), which happens when interacting with other js scripts that handle animation (Fancybox uses opacity animation in the overlay).
I would say that this is not a fancybox issue and that you should bring the issue to the cycle plugin forum, however (since you are using the lite version), you may want to edit the cycle js file and do the following changes to minimize the impact of the issue (at least it won't disappear from your page):
Replace the line 166:
var fn = function() {$n.animate(opts.animIn, opts.speedIn,
opts.easeIn, cb)};
with this:
var fn = function() {$n.animate(opts.animIn, 1000, opts.easeIn, cb)};
and line 167:
$l.animate(opts.animOut, opts.speedOut, opts.easeOut, function() {
with this:
$l.animate(opts.animOut,{queue:false, duration: opts.speedOut},
opts.easeOut, function() {
I keep running across this loading image
http://georgia.ubuntuforums.com/images/misc/lightbox_progress.gif
which seems to have entered into existence in the last 18 months. All of a sudden it is in every application and is on every web site. Not wanting to be left out is there somewhere I can get this logo, perhaps with a transparent background? Also where did it come from?
You can get many different AJAX loading animations in any colour you want here: ajaxload.info
I believe the animation came from the Mac OS X loading screen. Here's a similar one with a transparent background:
alt text http://homepage.mac.com/xraydoc/.Pictures/spinner.gif
I think it's just a general extension to the normal clock-face style loading icon. The Firefox throbber is the first example of that style that I remember coming across; the only real difference between that and the current trend of straight lines is that the constituent symbols have been stretched to give a crisper look, moving back to more of a many-handed clock emblem.