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.
Related
I am working a menu bar on a webpage. the menubar is based on an image library called Jcoverflip(<=You will find a demo here). The Image Slider works perfectly. That is until I start trying loading in content from different HTML's using AJAX technique.
When I flip a logo displayed in the top of the above image. Then it indeed does load the content from the other HTML's AJAX style. However the Jcoverflip slider does not work anymore.
Main.html
<div id="mycontainer">
<div id=w rapper>
<ul id="flip">
<li>
<img href="home" src="Logo.png" />
</li>
<li>
<img href="product" src="Product.png" />
</li>
</ul>
</div>
</div>
<div id="content"></div>
product.html
<img id="contact1" src="Contact.png">
MainMenu.js
jQuery( document ).ready( function(){
$("#content").load("home.html");
$("ul#flip li img").click(function(){
var page = $(this).attr("href");
$("#content").load(page + ".html");
return false;
});
});
when you click the product logo in the slider then the img of prouct.html will indeed load as intended but the slider does not slide to the product logo. the slider is now frozen.
here is a fiddle for more code. https://jsfiddle.net/qvgadgv4/
the fiddle doesn't work since you need Jcoverflip.
Is there anyone who can help me understand why using AJAX blocks my image slider from working? And come up with a solution to make it work with AJAX.
Well i still don't know why this Ajax method blocks my slider from working but I by chance found a solution.
You should ID your img instead of href.
<div id="mycontainer">
<div id= wrapper>
<ul id="flip">
<li><img id="home" src="Logo.png" /></li>
<li><img id="product" src="Product.png" /></li>
</ul>
</div>
Then load the content like this instead
$("#home, #product, #submit2").click(function(){
if(this.id == "home"){
$("#content").load("home.html");
}
if(this.id == "product"){
$("#content").load("product.html");
}
});
This will load the content into the div of the main html and the slider will work at the same time.
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 am using following theme for one of website (click here). This theme come with one background image and i modified this to multiple background images for 'section' tag <section id="intro" class="intro"></section>
This script doesn't wok properly as it show black screen in between image at time.
codepen example
<!-- Section: intro -->
<section id="intro" class="intro">
<div class="slogan">
<h1><span class="text_color">WELCOME TO SQUAD</span> </h1>
</div>
<div class="page-scroll">
<div class="wow shake" data-wow-delay="0.4s">
<a href="#latest-tabs" class="btn btn-circle">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</section>
<!-- /Section: intro -->
I am using a trick and showing all these image also in another div with it display property, this way helped to to resolve black screen between image transition as all image are cached if i am not wrong if i dont put these image in a hidden div then each image takes time to download.
<div class="background-images" style="display: none !important;">
<img src="http://bootstraptaste.com/theme/squadfree/img/bg1.jpg" />
<img src="http://feelgrafix.com/data_images/out/12/859698-nature-background.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140402202316338_photo.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140344524813450_photo.jpg" />
<img src="http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg" />
</div>
Overall you will notice that it breaks, for some reason it some works well in other browser other than FF.
i need to fix this or need another script which can show slid show for a container div as shown in this example and works well with fadein fadeout effect
It looks like that images are being downloaded via a GET request each time JS switches them. Try to cache them somehow so you can save some time on a get/redirect requests.
I think the black screen is caused by the image source, if you look the image source when black screen occurs, it doesn't show an image, and if you navigate to that source through the browser, it gives you an redirect to a different page.
This issue is caused due to incorrect image source...
For ex. this URL is not redirecting to any image..
"http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg"
I'm developing a RhoMobile appand I've been having lot of trouble with page transitions.
At the end, I just decided to turn them off for a better user experience. Every button click works perfectly, except for one where I have a button inside a Collapsible element.
For the click event on the button not to get interpreted as a click on the collapsible, I use this js code, which I suspect is causing trouble:
$(document).on('pagebeforeshow', '#index',function(e){
$('.details').bind('click', function (e) {
e.stopPropagation();
e.stopImmediatePropagation();
});
});
And in the HTML:
<div data-role="page" id="index">
Here go headers & navbar and other stuff
</div>
<div data-role="content">
<div data-role="collapsible-set" class="uurbon-block">
<div data-role="collapsible" data-collapsed="false">
<h3 data-position="inline"><p class='alignleft'>Collapsible title</p><div style="clear: both;"></div>
<span style="float:right;" class="button-span">
<a href="some_url.html" data-role="button" data-mini="true" data-inline='true' data-icon="star" data-iconpos="left" class="details" data-transition="none">
Button
</a>
</span>
</h3>
</div>
</div>
</div>
This will cause a blank page to be shown for 1-2 secs before transitioning. I'd be looking for a fix, but if not, i'd be happy with that page just beeing black (my app background is black also, so this blink wouldnt be so noticeable).
Note: I have alredy tried setting body background color in css, won't work.
Thanks for your ideas!
As pointed by Omar, if you want to put a button inside a collapsible and prevent the collapsible from capturing the click while also handling the page in the same browser, the correct way to do this is (Take notice that this may only apply to RhoMobile, but its worth a try on other jquerymobile-based frameworks):
and avoid RhoMobile trying to open this in a new browser is by using:
javascript:
$(document).on('pagebeforeshow', '#index',function(e){
$('.details').bind('click', function (e) {
e.stopPropagation();
$.mobile.changePage("your_page");
});
});
HTML:
Button
Notice the href="javascript:;". I had this first set to "#" and also "", but that didn't work.
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.