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.
Related
I've made a menu with a backlayered moving div on hover/current menu item in wordpress.
JsFiddle: https://jsfiddle.net/wwv9c0v7/
Problem: Everything works fine, except when I'm reloading the page (F5). A click on a link with new page works well too. I don't know why, but the position().left returns a bad value. It's moved too far left.
$magicLine.css("left", $(".current-menu-item").position().left)
Thanks for your help.
EDIT: Live preview
~ Neme
I've managed to see your problem, but as the documentation below refers, browsers do not expose theirs API to detect zoom situations, when you make a refresh to the page this have a different size, you can observe that behaviour when the page is loading, it begins with a different size (i assume the page comes with bigger size, because scroll bar is loaded after the page, so this makes the page to change it's size).
Docs: https://api.jquery.com/position/
Try to make this in jquery method: $(document).ready(...)by doing this you ensure that function will allways execute after the page is loaded.
I'm having a problem using jQuery Mobile 1.4.1 and jQuery 2.0 with a slideshow. I'm using JQM and Phonegap build to make an android application. Once you log into the application, in the main screen there's a slideshow which rotates a couple images. The problem is I don't know what's the proper way to initialize the slideshow in jQM.
I'm new with JQM and I'm a bit lost on the event triggering order, I've initialized the slideshow code in the pagecreate event, however it causes the slideshow to initialize every time I navigate to the main page.
What I'm expecting is to find an equivalent to jQuery $(document).ready() to execute it just once and keep the images loaded in cache to avoid the data loss and the faster response from the slider. Can anyone tell me where should I initialize the slideshow to be ready as soon as page loads just as $(document).ready()?
UPDATE 02/25/2014
I'm using Camera Slideshow (http://www.pixedelic.com/plugins/camera/) and the slider works properly, but it initializes every time I load or navigate to the main page, which makes it so slow and sometimes gives the impression that it's not working.
Any help is greatly appreciated, thanks!
I'm working on a site that is using Highslide JS to create a slideshow window of larger product images when an image on the product page is clicked. I'm also using Piotr Rochala's fine jQuery plugin, slimScroll, as an alternative to ugly browser default scrollers on the same page.
The problem occurs when a product image is clicked, creating a new .highslide-controls div behind the slideshow that should only be in the top of the slideshow window. The div gets appended with each click, which I believe I've narrowed down to a conflict with the slimScroll script.
See: http://www.thelifeguardstore.com/newproductcart/pc/viewPrd.asp?idproduct=7409
I've attempted using jQuery's noConflict(), changing up the orders of when scripts are called, and looking at each script's JS code, but can't find exactly what's causing the problem. Although I have a feeling it's probably right in front of me, laughing maniacally.
Any help or clues as to what may be causing the issue is greatly appreciated.
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
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.