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!
Related
I want to dynamically change the text of a span when a dialog is loaded using jQuery mobile. Following is the code present in my first page.
<a data-transition="turn" id="profile-btn" data-rel="dialog" href="profile.html">Some Text</a>
In the profile.html I have
<div data-role="page" id="profile-page" data-role="dialog">
<span id="username">username</span>
</div>
Following is the js code
$(window).load(function() {
$(document).on('pageinit', '#profile-page', function () {
jQuery("#username").text(localStorage.user);
});
});
My above setup is not working. Do you guys know what I could be doing wrong here?
I have following html
<body>
<div class="menus"></div>
<div class="maincontent"></div>
<div class="footer"></div>
</body>
Now when the page loads I want to show div class menus and footer and until the page loads loader image in div maincontent. How am I to achieve this? I tried putting loader div inside maincontent and using $(window).load(function(){}) but to no avail. Any idea and suggestions is welcome.
This should be the initial HTML.
<body>
<div class="menus"></div>
<img src="ajaxloader.gif" class="loader" style="display:block"/>
<div class="maincontent" style="display:none">
</div>
<div class="footer"></div>
</body>
After this, you can hide the loader once the page loads and show the main content. If you are using Jquery, this can be done as follows
$(document).ready(function(){
$('.loader').hide();
$('.maincontent').show();
});
Try this,
$(document).ready(function(){
$(".maincontent").fadeOut( "slow");
$(".menus,.footer").fadeIn("slow", function() {
$(this).text("menu, footer");
});
});
After window loading,main content loading image hide and menu, footer shows
CheckFiddle
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.
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 have the following block of HTML code more than once
<div id="page_1" class="page">
<div class="imageDetail_bg">
<img src="../_img/detail_car.jpg" alt="" id="car_detail" class="car_detail"/>
</div><!-- imageDetail-->
<div id="listThumbs">
<div id="thumbsContainer_1" class="thumbsContainer">
<div id="areaThumb" class="areaThumb">
<div id="posThumb_1" class="posThumb">
<img src="../_img/detail_car.jpg" class="detail_img" alt="">
</div>
</div><!--areaThumb-->
<div id="areaThumb" class="areaThumb">
<div id="posThumb_2" class="posThumb">
<img src="../_img/detail_car.jpg" class="detail_img" alt="" />
</div>
</div><!--areaThumb-->
...
...
...
</div><!--listThumbs-->
</div><!--page-->
and the following jQuery code:
$('.page').each(function(i) {
$('.areaThumb').each(function(j) {
$('.detail_img').eq(j).click(function(){
$('.car_detail').eq(i).attr('src', $(this).attr('src'));
});
});
});
What I want to do is: For each page there's a block of thumbs, and when I click in any thumb, the image in #car_detail is replaced by the image of the thumb I clicked. At this moment I can do this, BUT the #car_detail image is replaced in all pages. I'm not getting individually actions for each page. Every click make the action occurs in all pages.
Can anyone tell me what I'm doing wrong?
Thanks
You need not iterate through each element of the jquery selector result to bind a click event.
And you are missing a closing div for thumbsContainer div, add that before each .
Also if you have an element with id car_detail then you should use #car_detail instead of .car_detail
Working example # http://jsfiddle.net/2ZQ6b/
Try this:
$(".page .areaThumb .detail_img").click(function(){
$(this).closest("div.page").find('.car_detail').attr("src", this.src);
});
If the .detail_img elements are being used for the car_detail image then you can simplify the above code to:
$(".detail_img").click(function(){
$(this).closest("div.page").find('.car_detail').attr("src", this.src);
});
You need to give context to your children nodes:
$('.page').each(function(i) {
$('.areaThumb', this).each(function(j) {
$('.detail_img', this).eq(j).click(function(){
$('.car_detail', this).eq(i).attr('src', $(this).attr('src'));
});
});
});
Every this is pointing to the current element given by the jquery function that called it.
[edit] Cybernate found a better way to do what you wanted to. My answer mostly explains why your code did not work as you wanted
I think you have the wrong approach about this,
You should just use cloning and you will be fine...
HTML
<div class="holder">Replace Me</div>
<div>
<div class="car"><img src="img1" /></div>
<div class="car"><img src="img2" /></div>
</div>
JS
$('.car').click(function(){//when you click the .car div or <img/>
var get_car = $(this).clone();//copy .car and clone it and it's children
$('.holder').html('').append(get_car);//put the clone to the holder div...
});
I think this is what you should be doing, simple and elegant... do not understand why you complicate as much :)