Response title
This is preview!
Move this topic
Can't get any image slider to work with jquery.mobile
in jQuery Mobile
•
7 years ago
I've tried nearly every slider I can find, and none of them will
work properly with jquery.mobile.
Currently, I'm trying to get jquery.excoloSlider to work. The problem is, when I go to the page with the slider, it doesn't show. If I refresh the page, it shows and works. But when I go back to page one and start over, same thing happens. It's pretty much the same with any slider.
Other sliders I've tried include Photoswipe, Swiper, Swipe, wmuSlider, Glide and others.
I've tried combing through the css to see if there are any conflicts, inspected with Firebug, etc, but can't figure it out.
Can anyone help me out? Thanks.
Currently, I'm trying to get jquery.excoloSlider to work. The problem is, when I go to the page with the slider, it doesn't show. If I refresh the page, it shows and works. But when I go back to page one and start over, same thing happens. It's pretty much the same with any slider.
Other sliders I've tried include Photoswipe, Swiper, Swipe, wmuSlider, Glide and others.
I've tried combing through the css to see if there are any conflicts, inspected with Firebug, etc, but can't figure it out.
Can anyone help me out? Thanks.
1
Replies(29)
Did you try…Swipe to
navigate - jQuery Mobile Demos
. One of the keys to making it work is to have the identical
<head>, save the <title>. It sounds like you had different
<head>s with different CSS and maybe scripts.
JΛ̊KE
Leave a comment on jakecigar's reply
Wow, this is very intriguing, and probably the perfect solution.
However, it looks very complex. There are two different "DOM Source
of Selections" html pages for each slide, for example. Having a
hard time wrapping my head around this setup.
I looked at the View Source section, but that is overly simplistic for what they actually have set up.
For example, for the Seoul slide has an html page that starts out with:
There's also no actual reference for the jpegs they are showing. For instance the photo at ../_assets/img/capetown.jpg is not actually referenced in the html document. How does it get called? I see there's some css referencing the jpegs, like: #seoul { background-image: url("../_assets/img/seoul.jpg"); } ... however, I don't see #seoul referenced in the html anywhere.
I don't understand how it's all organized and tied together. Is there any explanation for this type of setup anywhere?
Another question: would the whole app have to consist of slides like this, or can it be just one part?
I looked at the View Source section, but that is overly simplistic for what they actually have set up.
For example, for the Seoul slide has an html page that starts out with:
<html class="ui-mobile"><head><base href="http://demos.jquerymobile.com/1.4.5/swipe-page/seoul.html">... and is 89 lines, but it also has an html element that starts with:
<div style="min-height: 887px;" tabindex="0" data-external-page="true" data-url="/1.4.5/swipe-page/seoul.html" data-role="page" id="seoul" class="demo-page ui-page ui-page-theme-b ui-page-active" data-title="Seoul" data-dom-cache="true" data-theme="b" data-prev="capetown" data-next="sydney"> <div role="main" class="ui-content"> <div id="trivia-seoul-placeholder" style="display: none;"><!-- placeholder for trivia-seoul --></div>... and is just 12 lines.
There's also no actual reference for the jpegs they are showing. For instance the photo at ../_assets/img/capetown.jpg is not actually referenced in the html document. How does it get called? I see there's some css referencing the jpegs, like: #seoul { background-image: url("../_assets/img/seoul.jpg"); } ... however, I don't see #seoul referenced in the html anywhere.
I don't understand how it's all organized and tied together. Is there any explanation for this type of setup anywhere?
Another question: would the whole app have to consist of slides like this, or can it be just one part?
Leave a comment on James Israel's reply
Much of the code on that demo is extraneous. I will attempt to make a
condensed version because I might use it myself. I assume you don’t want
the trivia part of the page.
I would write one page. With the image specified by a parameter. I
could use javaScript or a server language to fill in the page.
JΛ̊KE
Leave a comment on jakecigar's reply
You're missing the most important take-away from Jake's
post:
If you don't get that right, you are going to find that almost ANY plugin that you use for ANY purpose won't work right!One of the keys to making it work is to have the identical <head>, save the <title>. It sounds like you had different <head>s with different CSS and maybe scripts.
We have to guess at what is
wrong, since you didn't give us much to work with. it's
better to share a link or make a demo, than to just give us a
word story about what you did.
When you've tried a bunch
of plugins, and none of them are working, Jake's answer I
show in quotes above is the most likely guess.
He ALSO showed you an
alternative to using a plugin for this, since with only a very
little bit of code you can implement swipe-to-navigate between
jQuery Mobile pages, and that might suit your purpose.
I've used FlexSlider in
JQM, as have many others. Owl seems recently trending, and many
here have used it.
It sounds like you have a
fundamental misunderstanding about jQuery Mobile page structure
and Ajax navigation. Best to clear that up now!
What
is inside <head></head> should be IDENTICAL for every
one of your pages!
If you have some
script that you use only on one page, you can include it
in <body>
, just before the end
of <div
data-role="page"> .
If a plugin you use
doesn't give instructions for use with jQuery Mobile, you
should seek advice from the author or others. But if you know
about jQuery Mobile ajax page navigation, you will know to
ignore documentation in plugins that tells you to use
$(document).ready()
and initialize the
plugin in a
pagecreate
callback and you will
also know the valid places to link to the script.
Some plugins may have some
other specific incompatibilities with JQM, so you should
always check the docs and what other developers have said on
forums, in blogs, etc.
Leave a comment on watusiware's reply
Okay, thanks. I am a newbie, as I'm sure you've guessed!
The sliders were not working even within the same page, using the sections (<div data-role="page">), so there was only one <head>.
Thanks for the heads up on the pagecreate , that could be part of the problem. I would like to use the swipe-to-navigate, that seems ideal, and I am trying to learn how to use it. Is there a section in the docs on that? I can't find anything.
The sliders were not working even within the same page, using the sections (<div data-role="page">), so there was only one <head>.
Thanks for the heads up on the pagecreate , that could be part of the problem. I would like to use the swipe-to-navigate, that seems ideal, and I am trying to learn how to use it. Is there a section in the docs on that? I can't find anything.
Leave a comment on James Israel's reply
Jake, I do actually want to use the trivia part. Thanks for your help,
I'd like to see your stripped-down version when you're done.
Leave a comment on James Israel's reply
Leave a comment on jakecigar's reply
Sure. But I still don't know how to do it. Is it all set up as one
index.html page with sections, or separate pages? Can you attach the
files? Thanks for your help!
Leave a comment on James Israel's reply
You can view source. It’s one HTML page. It’s dead simple. It’s
controlled by the javaScript object at the top of the script.
You can use better CSS. And you can add more info to the object,
like some text to put in the page.
It’s not ready to be used out-of-the-box, It’s just for a
programmer to play with.
JΛ̊KE
Leave a comment on jakecigar's reply
Okay, I see. So in your script, you're calling the images directly
from a url. But in their demo, with their swipe-page.js, they don't
do that. How are they calling their images? Does it have to do with the
line?$( ":mobile-pagecontainer" ).pagecontainer( "load", next + ".html" );
Leave a comment on James Israel's reply
I found that code to be too complex to isolate the simple code that it
needs. They also used a different page for each image.
Yes I get the image number from the search parameter to the URL of
the requested page. Since subsequent pages are retrieve using AJAX,
the script is never executed again.
JΛ̊KE
Leave a comment on jakecigar's reply
Okay, cool, thanks so much for your help!
Leave a comment on James Israel's reply
There are many sliders that can work with JQM. Search this forum to find
ones that developers have been successful with, or check documentation
for popular sliders to see if they have instructions for using with JQM.
But you need to familiarize yourself with JQM page structure and
Ajax loading, or you will face significant hurdles getting ANYTHING to
work, beyond a one-page site.
Leave a comment on watusiware's reply
Start experimenting with sliders with a blank page. Don't bring the
baggage of the rest of your site with you until you get the slider
working!
Once you have it working in a single-page site, add a couple more
pages (say, just with arbitrary text) to make sure it still works
after you changes pages and come back. If not, you'll have to hit
the books or come here to ask questions.
When you have something with a problem, give us a link to your
site, or make a Plunkr. (Plunkr is better for JQM than jsFiddle.)
Leave a comment on watusiware's reply
And keep in mind that jQuery Mobile has something that's called a
"slider" that is like a linear volume control. You will
confuse people here calling it a "slider".
"Carousel" will not confuse anybody.
Leave a comment on watusiware's reply
Thanks, watusiware.
You said earlier that:
You said earlier that:
I did that, and it works, but when you go back to the index.html page, the script is still running, and it's placing the background image I used on the other page there. How do I kill the script before returning?If you have some script that you use only on one page, you can include it in <body> , just before the end of <div data-role="page"> .
The script is not still running. It ran. It updated the background
image, and it is still there. All pages must undo or redo what other
pages may have done to the <body> because they share it.
JΛ̊KE
Leave a comment on James Israel's reply
I added trivia to my version, and cut out subsequent http requests. Cape town
does just about everything the demo does, with much less code, and no
extra pages.
JΛ̊KE
Leave a comment on jakecigar's reply
James, it is very hard to help you without seeing what you did. We could
probably tell you what you did wrong in an instant if you would show us.
It is probably something obvious.
Leave a comment on watusiware's reply
We don't even know if you are using multiple pages in one document,
or a separate document for each page. I recommend in most cases to use a
separate document for each page.
It might help you to know that if you use a separate document for
each page, the very first page is always present in the DOM. It is a
jQuery Mobile oddity.
Unless you use some fancy settings, though, every other page is
removed once you navigate away from it. The page is still there during
the transition, but once the transition has completed, JQM removes the page.
Did you put your carousel on the first page?
Alternately, it sounds like maybe you did something strange with a
background image. You shouldn't put a background image on the
document. If you do, it will appear on every page.
You can't treat JQM pages as if they were documents!
Leave a comment on watusiware's reply
Hey guys, thanks for your patience.
watusiware, you said:
I am using separate pages, and am now trying the Owl carousel. I've got it working, but with the
$(document).ready() section in there. Is the pagecreate thing supposed to be included in the main Owl script somewhere? Or is it a separate script you create that is called in the page? Or does it still go on the page like $(document).ready() does?
I could create a Plunkr for you if you want, but I don't think it would help with this particular question. Maybe you could direct me to something that explains the pagecreate thing plainly.
Jake, I tried your new setup and for some reason I couldn't get it to work for me. Probably missing something. I'll try it again tomorrow when my brain is fresh ;)
I really appreciate both of you helping a newbie out like this.
watusiware, you said:
I've tried to find documentation on this, but everything I've found is very brief and hard to understand.If you know about jQuery Mobile ajax page navigation, you will know to ignore documentation in plugins that tells you to use $(document).ready() and initialize the plugin in a pagecreate callback and you will also know the valid places to link to the script.
I am using separate pages, and am now trying the Owl carousel. I've got it working, but with the
$(document).ready() section in there. Is the pagecreate thing supposed to be included in the main Owl script somewhere? Or is it a separate script you create that is called in the page? Or does it still go on the page like $(document).ready() does?
I could create a Plunkr for you if you want, but I don't think it would help with this particular question. Maybe you could direct me to something that explains the pagecreate thing plainly.
Jake, I tried your new setup and for some reason I couldn't get it to work for me. Probably missing something. I'll try it again tomorrow when my brain is fresh ;)
I really appreciate both of you helping a newbie out like this.
Leave a comment on James Israel's reply
James, you may have gotten it during an update. I now preload the next
image. It should make it faster. I’ve tested with my iPad, Firefox,
Chrome, and Safari.
Another important thing about JQM is that you almost never use $(document).ready.
There are many different events that happen at different times. You
can see some of them in the demos that we wrote for this forum.
Plunker - JQM-forum
Homepage -- pay attention to the Single Page Model demos.
JΛ̊KE
Leave a comment on jakecigar's reply
Okay, I hope I did this right, it seems to work. I replaced the old
$(document).ready(function() section with a separate .js file, beginning
with the line:
$(document).on("pagecreate", function() {
...and then the rest of the code that used to be in the $(document).ready(function() section. I call this from the bottom of the data-role="page" div on the page that uses it.
Is that right?
$(document).on("pagecreate", function() {
...and then the rest of the code that used to be in the $(document).ready(function() section. I call this from the bottom of the data-role="page" div on the page that uses it.
Is that right?
Leave a comment on James Israel's reply
If it works as you expect, it's right. Does it work as you expect?
Otherwise, show us what you did. A complete example, not bits and
pieces posted to the forum. I'm tired of guessing. It's
impossible for us to look at one line of code, along with a
description of where you put it (which might be accurate or
inaccurate...) and tell you if it's "right".
You make it difficult to help you.
If you make a Plunkr, we can look at it and make changes.
Leave a comment on watusiware's reply
Well, the slider seems to be working right now, so thanks so much for
your help. I'll definitely make a Plunkr if I need more help with
it. Thanks again, you guys rock!
Leave a comment on James Israel's reply
We would love to see what you came up with.
As you know, I’m working on my own image slider. It’s pretty much
done now. http://home.jejaju.com/jqm-slides/ is now a directory of
several versions.
JΛ̊KE
Leave a comment on jakecigar's reply
Jake, I used Owl and it's doing just what I want, so I'm not
going to shake that tree any more! If you want to see what I came up
with, should I do the Plunkr thing? I've not used that before. Or I
could give you a link to an .apk file I made in Phonegap.
Leave a comment on James Israel's reply
Thanks. Android .apk files won’t do me much good. If you’ve used owl, I
assume it is similar to their demos.
As far a Plunkr, you really should learn it for sharing other code.
Jon, Omar, and I set up several plunkr demos and can always use more!
JΛ̊KE
Leave a comment on jakecigar's reply
I'll look into making a Plunkr with it, sounds like something I
should get familiar with anyway.
Leave a comment on James Israel's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to James Israel's question
{"z7664639":[14737000006273215,14737000006273229,14737000006273231,14737000006273233,14737000006273301,14737000006273303,14737000006273627],"z52998022":[14737000006276412,14737000006278511,14737000006278513,14737000006278515,14737000006278517,14737000006278519,14737000006278521,14737000006278555,14737000006278557,14737000006274781,14737000006274783,14737000006275851,14737000006275853],"z2950240":[14737000006276417,14737000006276787,14737000006276815,14737000006276817,14737000006276819,14737000006276859,14737000006276861,14737000006276927,14737000006279225,14737000006279369]}
Statistics
- 29 Replies
- 4300 Views
- 1 Followers