I'm currently trying to add iDangerous Swiper to a page built with jQuery Mobile but in order to display the swiper I need to reload the page. I have seen a few instances where people have had some issues with these but their solutions have not work for my issue below.
I have tried several different things: pageshow, pageinit, pagebeforeshow, mobileinit. Also trigger("create"), trigger("refresh") and have tried adding the script before or after jQuery Mobile js.
I'm currently using jQuery Mobile 1.4.1 alpha 2 and Swiper 2.1.0.
My question: What would be the proper sequence for the scripts in order to make it work and which one of the page event above should do the trick? Thanks for your time.
My HTML for the swiper goes as follows:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="picture"><img src="image1.jpg" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " id="productImage" /></div>
</div>
<div class="swiper-slide"><div class="picture">
<img src="image2.jpj" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " />
</div></div>
<div class="swiper-slide"><div class="picture">
<img src="image3.jpg" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " />
</div></div>
</div>
</div>
My jQuery and jQuery Mobile files are loaded at the bottom of the page.
<script type="text/javascript" src="includes/templates/YOUR_TEMPLATE_mobile/jscript/jquery.min.js"></script>
<script>
$(document).on('pagecreate', function(){
$( "#leftPanel" ).trigger( "updatelayout" );
$.mobile.defaultDialogTransition = 'slide';
$.mobile.defaultPageTransition = 'slide';
$.mobile.selectmenu.prototype.options.nativeMenu = false;
});
</script>
<script src="/4.0/includes/templates/YOUR_TEMPLATE_mobile/jscript/idangerous.swiper-2.1.min.js"></script>
<script type="text/javascript" src="includes/templates/YOUR_TEMPLATE_mobile/jscript/jquery.mobile-1.4.0-alpha.2.min.js"></script>
<script src="/4.0/includes/templates/YOUR_TEMPLATE_mobile/jscript/boilerplate/helper.js"></script>
<script>
$('#productinfo').on('pageshow', function() {
var mySwiper = new Swiper('.swiper-container',{
centeredSlides: true,
slidesPerView: 2,
watchActiveIndex: true
});
});
</script>
You may try this one:
$('#productinfo').live('pageinit',function(event){
swiper function...
});
I came across a solution for this problem while trying to solve something else. The site I was building is generated using php. The html was already embedded therefore all product info pages had the same id of #product_info and the div that contained the swiper always had the id of #product_image. By adding a php function to the id #product_image for example:
#product_image<?php echo $product_id; ?>
and giving swiper the same as in
var mySwiper = new Swiper('#product_image<?php echo $product_id; ?>',{
I was able to eliminate the need for reloading the page. Hope that helps someone.
Related
I want to use the responsive image slider 'bxslider' (bxslider.com) on my site. Unfortunately the slider's images often don't appear on the page and only the controls are visible. However as soon as I refresh the page, the slider's images reappear.
I've looked at similar questions asked here, but he suggestions given - such as "only use jQuery 1.x" - don't seem to work for me.
Would be great if someone had another suggestion! The actual URL is: http://www.lauraniebel.com/casestudy01.htm and http://www.lauraniebel.com/casestudy02.htm And here's my code:
<script src="js/modernizr-2.8.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<div class="bxslider3">
<img src="img/cvnewsletters01.jpg" alt="Curtin Volunteers Newsletters">
<img src="img/cvnewsletters02.jpg" alt="Curtin Volunteers Newsletters">
</div>
<div class="bxslider">
<img src="img/cvinfographic01.jpg" alt="Curtin Volunteers Infographic">
<img src="img/cvinfographic02.jpg" alt="Curtin Volunteers Infographic Closeup">
</div>
<div class="bxslider2">
<img src="img/cvposters01.jpg" alt="Curtin Volunteers Posters">
<img src="img/cvposters02.jpg" alt="Curtin Volunteers Posters">
</div>
<script>
$( document ).ready(function(){
$('.bxslider').bxSlider();
});
$( document ).ready(function(){
$('.bxslider2').bxSlider();
});
$( document ).ready(function(){
$('.bxslider3').bxSlider();
});
</script>
Wrap your images inside of a container, and give that container an explicit width and height.
Or set bxslider to load after the images have loaded, possibly using image onload
As it stands, bxslider is initializing before the images have had time to load, calculating 0 width and height for them, thus giving them no appearance.
jsfiddle
I've wrapped your images in a <div class="container"></div>, given that explicit width/height. The issue is inline elements (the images) calculating width/height based on their contents (the images that haven't loaded) and bxslider uses the 0 width/height to initialize itself.
Typical jQuery problem.
JavaScript is all like "You images done yet or what?"
Found this little plugin...
It detects when all the images have been properly rendered before the scr
Github link
CDN:
<script src="https://unpkg.com/imagesloaded#4.1/imagesloaded.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/imagesloaded#4.1/imagesloaded.pkgd.js"></script>
I've created a website called "Pumpn Records" and it's almost finished. On the website there is a section called "Releases". It is divided in two sections, but only one is visible.
So this is the website: http://s448350928.online.de/pumpn/records/index3
The Releases Section there has this html code (simplified):
<div class="container1" id="releases">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script>
function hide2014and2016show2015()
{
$("#2014").fadeOut(4000);
}
</script>
<script>
$(document).ready(function(){
$("#2015").hide();// hide it initially
$('#forward2014').click(function(){
$("#2015").delay(4000).fadeIn(4000); });
});
</script>
<h2>Releases</h2>
<div id="yearcontainer">
<div id="back2014" style="display:inline-block">
<img id="back2014img" src="..."/>
</div>
<h2 id="year">2014</h2>
<div id="forward2014" onclick="hide2014and2016show2015();" style="display:inline-block">
<img id="forward2014img" src="..."/>
</div>
</div>
<div id="2014">
<div class='container3' style="overflow:visible;">
<h2>EPs</h2>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Ganz Okay EP (Instrumental)</h3>
</a>
</div>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Ganz Okay EP</h3>
</a>
</div>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Viernacheins EP</h3>
</a>
</div>
</div>
</div>
<div id="2015">
<div class='container3' style="overflow:visible;">
<h2>Alben</h2>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Larmoyanz</h3>
</a>
</div>
</div>
<div class='container3' style="overflow:visible;">
<h2>EPs</h2>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Mrs. EP</h3>
</a>
</div>
</div>
</div>
</div>
If you look at the Releases Section, you will see there is this title ("2014"). Left and right to this titles are arrows, or carets I think they are called. :D
What I wanted to code is:
When someone clicks on the right arrow, the div with the id "2014" should fade out in 4000 milliseconds, then the div with the id "2015" should fade in in 4000 milliseconds. I put a delay before the fade in of that "2015" div. It's also 4000 milliseconds, so the fade in of "2015" should start right after the fade out of "2014" has finished.
What really happens is: http://i.stack.imgur.com/hxLVB.gif
So why isn't it working? I googled and stackoverflowed so much in the last hours and changed that code so often, but it still doesn't work. :(
UPDATE:
Now I know what the problem is, but I can't solve it. This website is a single page website, so I have a javascript plugin. It's called fullpage.js and I know how it works. When you scroll with your mouse, it adds an "transform: translate3d(x, y, z);" property to the "page-container fullpage-wrapper", and changes the y-value, so the page goes down. So I made two fiddles for a demonstration of the problem:
NOT WORKING FIDDLE (with the transform property in it):
jsfiddle.net/ktf9onjo/ (sorry, I'm not allowed to post more then two clickable links...)
WORKING FIDDLE:
jsfiddle.net/rant5af9/
You see that the problem is the transform property.
WHY???
I need an alternative. I cannot just remove it, the script will
be readd it every time I scroll.
Yeah, I could just change the translate3d(x, y, z) to a translateY(y), but nooo, that isn't working, I tried it. :D
INFO: You can find the fullpage.js in the javascript box in both fiddles.
PS: The website isn't finished yet. A lot of links and other things aren't working at the moment.
Please help, fanx! :)
Why the problem happens
As explained by #kosmos in comment:
Because the queue for animations is for every element animation itself. a won't wait for b to make its animation, but if you try to animate a two times, the second animation will wait for the end of the first one.
Solution
jQuery fadeOut function accepts a complete callback function (source).
This callback function is executed once the fade-out is complete. You don't need to use delay anymore this way, and your animations chaining will keep in sync.
html:
<div id="forward2014" style="display:inline-block">
javascript:
$('#forward2014').click(function(){
$("#2014").fadeOut(4000, function(){
// this starts when the fadeOut is finished
$("#2015").fadeIn(4000);
})
});
demo in this snippet
(click the >> as forward button)
$(document).ready(function(){
$("#2015").hide();
$('#forward2014').click(function(){
$("#2014").fadeOut(4000, function(){
// this starts when the fadeOut is finished
$("#2015").fadeIn(4000);
})
});
});
<div id="2014"style="display:inline-block">
2014
</div>
<div id="2015"style="display:inline-block">
2015
</div>
<div id="forward2014">
>>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Further remarks:
You may want to use jQuery's .on function for event listeners (reference). You can replace the onclick= and the .click by it. This should make your code easier to manage and more performant.
The ids in your html are supposed to contain at least a letter (source). Replace id="2014" by id="year-2014" or something like that.
i didn't got what you need exactly but to make to jquery actions going sequences you must call the second action with call back like this
$('#whatever').fadeOut('slow', function() {
$('#whatever').delay(4000).fadeIn('slow');
});
See This
I have an app that loads articles in html format. For some articles, I have an image gallery with a slider in JQuery.
I added JQuery and the slider JS files to the app and they are loaded, but the slider still doesn't work.
HTML received from REST services :
<div id="gallery">
<div class="royalSlider">
<img src="xxx">
<img src="xxx">
<img src="xxx">
<img src="xxx">
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#gallery .royalSlider').royalSlider({
autoScaleSlider: true,
imageScaleMode: 'fill',
...,
});
});
</script>
<div id="content">
<span id="header>This is the title</span>
<p>This is the content</p>
</div>
The HTML is simply added in the HTML config field of a panel.
Any idea how to make this slider work with ST2 ?
I resolved my issue by creating the following function after having loaded and added the HTML content to the panel:
executeJSScript: function(panel) {
var scripts = panel.renderElement.dom.getElementsByTagName("script");
for(var i=0; i < scripts.length; i++) {
eval(scripts[i].text);
}
}
It gets all tags in the dom of the panel and than execute (eval function) each script.
Not very elegant indeed, but it works... Hope it could help someone and if you have a better solution, please share it!
I'm launching the fotorama jquery gallery plug-in from a standard HTML link. It works nicely but I'd like to launch in full-screen mode right away, rather than having to click the link within fotorama to change it to full screen after it's launched.
The code I have is this:
<div id="fotorama" class="fotorama"
data-width="100%"
data-height="100%"
data-nav="thumbs"
data-allowfullscreen="true"
data-transition="crossfade"
data-auto="false">
</div>
<p class="something">Something</p>
<script>
$(function(){
$('.something').click(function(){
var $gallery = $('#fotorama').fotorama();
var fotorama = $gallery.data('fotorama');
// Overwirte all the photos
fotorama.load([
{img: '0027.jpg'},
{img: '1759.jpg'}
]);
});
});
</script>
Since I can't find the API documentation (perhaps it's not complete just yet?) I was wondering if anyone knows how to do this?
Many thanks.
1. requestFullScreen()
Use Fotorama API call with prevented auto-initialization:
<script>
$(function () {
var fotorama = $('.fotorama')
.fotorama({allowfullscreen: true})
.data('fotorama');
fotorama.requestFullScreen();
});
</script>
<div class="fotorama"
data-auto="false"
data-height="100%">
<img src="1.jpg">
<img src="2.jpg">
</div>
But there will be a fullscreen-exit icon at the top-right, and users will be able to leave fullscreen. And even if you make the icon invisible, it will possible to close fullscreen by pressing esc button. So...
2. data-width="100%" data-height="100%"
I believe that it’s better to imitate fullscreen with this snippet:
<body style="margin: 0;">
<div class="fotorama"
data-width="100%"
data-height="100%">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
</body>
Example: http://fotorama.io/examples/full-window.html.
I've wasted a lot of time trying to hide Fotorama block.
Try to add class “fotorama--hidden”.
<div class="fotorama fotorama--hidden">
<!-- images -->
</div>
This will hide the block but all functions from Art's answer #1 will work normally.
And when you exit fullscreen Fotorama will just hide.
i want to display number of images in one page. For the best viewing i integrate lazy loading.
My javascript code is
<script src="{$this->scriptFolder}jquery.lazyload.js"></script>
<script src="{$this->scriptFolder}lazy_loader.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".lazy").lazyload({
effect : "fadeIn"
});
$(window).scrollTop(1);
});
</script>
My html code is like this
<ul>
<li class="span2" id="hider">
<a href="/Magazine/index/get/52/" class="thumbnail magazine_cover">
<img width="180" height="230" class="lazy" alt="cover" src="/public/demo.jpg" data-original="http://magsonwink.com/ECMedia/MagazineFiles/MAGAZINE-141/ISSUE-10085/CoverPage/Thumbnail/Outlook.jpg">
</a>
</li>
</ul>
but when i load this page the images are loading from different sections. I want to load images one by on
My staging site : http://staging.delhipress.thewinkstore.com/
if any one know about this please help me