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!
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.
I am trying to create a simple preloader that will request and preload all resources until everything is cached. Then the website should fade-in. The issue what I am having is that Im not sure if my code below is ok as im still a novice. Also what I cant manage to achieve is stop any css3 animation from firing before the preloader finishes. Forexample, I have alot of fade in and slide in effects when the websites is loaded. When the preloader runs it also somehow fires my animations in the background...hence when my site is loaded no animation is shown.
So I need to be able to
1) Preload all resources and cache them before the site is shown (meanwhile it shows a small gif)
2) When loading it should prevent animations from firing. When it is done the site shows and then starts to trigger all css3 animations. The animations are only fired once by the way which is why im concerned.
Here a JsFiddle. I hope that is ok as I am still new to this website and dont use it very often other than notepad ++ or dreamweaver:
http://jsfiddle.net/5w2JU/
<script type="text/javascript">
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
})
//]]>
</script>
Use jquery .addclass() if loading is complete.
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.