In my scenario, I'm linking to fairly large images (both in dimensions and filesize). It's understandable that fancybox will have to load for a few seconds before displaying them. The problem is that the loading animation is not showing up, so when the user clicks the thumbnail, it gives the impression that nothing is happening. Fancybox eventually comes up a few seconds later.
There is a secondary issue, also. The images are set to display as a gallery, via the "rel" attribute. Even when the user is viewing one image, browsing to the next takes a while (again, due to filesize), but because the throbber is not showing up, it seems like the prev/next buttons are not working. Any ideas?
I should add that I'm using fancybox v2.
My code (after including the necessary css and scripts for fancybox and the buttons helper, of course): http://pastebin.com/u3g8U8FS
Updating to the latest version (2.0.6) did the trick.
Make sure that the fancybox_loading.gif as well as the fancybox_sprite.png files are in the same folder as the jquery.fancybox.css file
Related
I am using flickity to make carousels in my Shopify store. An odd thing happens when it sometimes does not load. It happens sometimes, not always. I could not find anything in the console to help understand why this is happening. Refreshing the page usually gives the correct result
Things I've already tried:
Using only 1 of the 2 Flickity components, still doesn't work
Hosting the css and js files on Shopify's servers vs. unpkg.com (where it is normally hosted)
Website: https://4s6snnbh0sbvzjnb-5771952162.shopifypreview.com
What sometimes happens:
Intended Result (happens after you refresh):
There are some situations where the slider is not working properly due to some JS conflicts or content loading issues like slow-loading images.
there is a small trick that triggers the Flickity slider to work.
// trigger a resize event once the window is loaded, it refresh the Flickity slider on resize
window.onload = function(){
window.dispatchEvent(new Event('resize'));
}
When the window is resized slider recalculate it with and slide to show etc, so if there is an issue that causes random failure of the slider.
Then we generate a javascript code resize event, and the slider works perfectly.
My goal is to link to photo galleries directly on a web page that uses a Jquery’s “Animate” and JS/CSS. The page in question is witold.org (click on either photo to go to a gallery I want to link directly.)
I learned why this is not possible due to security issues.
As such, I was thinking that perhaps I can create additional HTML pages for each gallery with just the gallery script. For example, this page.
But even though I am using the same gallery script, linking to the same CSS and same JS, the gallery has a lot of errors. Gallery seems to partially load: no photos load initially but when mouse is over the thumbs they show up, and when one clicks on a thumb the large JPG shows up. But then everything seems to stop working. I can't increment to next photo via clicking thumbs or clicking arrows.
I am missing some fundamental piece of this, but not sure what... I guess my question is that if I navigate to the gallery via main page it works but when I strip only gallery code to a seperate html page the code fails. Any ideas?
http://www.canadiandreamhouses.ca/listings/viewlisting?id=58
using
jquery-1.6.1
http://shadowbox-js.com/download.html - shadowbox 3.0.3 (downloaded 02/06/11)
http://pixelentity.com/previews/components/estro/index.html - Estro Slider (downloaded 02/06/11)
I am having an issue in that the images which are supposed to load up in a shadowbox, do not register and just open in a new window. The images below the moving slider gallery open fine. When I open one of those images below, the other images have been included in the gallery. It is just I can not open the gallery from the moving images.
I suspect there is some conflict between the two scripts but I cannot find it. I have tried different loading orders and methods, with no luck.
Solved the issue, I needed to add a class to the links in the gallery script (for example .slideshadow)
then, i called this code after the initial creation of shadowbox
$(function(){
Shadowbox.setup("a.slideshadow");
});
The reason, I gather, is that the jQuery being done to the html in the slide show makes it so that the initialization of shadowbox cannot bind, or becomes unbound. The .setup function allows me to rebind it. At first I tried to bind it to every a tag, and this was no good. Every tag regardless of having a rel attribute would open in a shadowbox.
Also, waiting for window.load was too long. It would require the first image to cycle through the slide show before the shadowbox would load.
I've got a page with a lot of images (thumbnails). You should be able to expand the images via Lightbox. I need to encourage the browser to load the image in the Lightbox before any other image (thumbnail).
I remember some articles (I can't find anymore) on how to influence the loading mechanism of the browser (use a different subdomain to allow another thread), but I'd like to know whether there might be other options (i.e. without additional subdomains).
To clarify the issue:
Example (how I'd like it to behave)
I visit the page
I click on the 3rd picture thumbnail
The 3rd picture is shown (while the remaining thumbnails are loading)
Example (how it behaves right now)
I visit the page
I click on the 3rd picture thumbnail
A spinning wheel is shown until all thumbnails are loaded
The 3rd picture is shown
Are there any tutorials/papers/views on this issue?
Just did it with using jQuery $('<img>').attr('src', ...) in my custom queue-manager which limits the browser to load images 1-by-1 thus having the capacity to load additional images that might be showing up on the page (like the one in the lightbox).
If you visit here: http://www.egyptevakantie.nl/dahab, click on the "andere plaatsen" tab, and then click on an image it brings up a magnified image, courtesy of the jQuery lightbox plug-in.
However, if you do the same here http://www.egyptevakantie.nl/dahab?rhys=yes (essentially the same site except for a couple of stylesheets and one or two minor html changes, none of which are in close proximity to the images) the lightbox fails. Instead of overlaying the content the lightbox is appended to the bottom of the page, where it is also displayed weirdly.
So far in debugging I've managed to work out that the plug-in still calculates the correct left and top values for where to place the lightbox, but by the time the dhtml is generated the top value has changed completely.
Does anyone have any idea why this is happening?
I think you are missing the jquery lightbox stylesheet file.
in the first page there is a reference to this css file:
/css/jquery.lightbox-0.5.css
but on the second link there is no reference to this file.
this css file is included in the jQuery lightbox download located here:
http://leandrovieira.com/projects/jquery/lightbox/
If image is appended at bottom page, for sure postion:absolute is not set.