注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

百鬼夜行

身是菩提树,心如明镜台,时时勤拂拭,勿使惹尘埃。

 
 
 

日志

 
 

Create A Simple FullScreen Image Gallery Slideshow With JS & CSS  

2014-06-23 17:26:45|  分类: HTML5CSS3WEBAPP |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Right now my 2nd year students are working on an interactive map for another class. Inevitably, they want to feature some ambitious code in their projects, including a fullscreen web image gallery. Since I haven’t yet officially started teaching themJavaScript, I had to make sure that the solution was very easy to apply. Thus, the code below. I’ve also linked through to the fullscreen example in the example above.

While it would be possible to create a fade-in-out gallery like this in pure CSS, the inclusion of the FullScreen API necessitated some scripting. I decided to take advantage of this and apply the CSS animation to the images via JavaScript, providing the opportunity to add JavaScript-driven UI controls in future versions.

HTML Structure & CSS Presentation

The markup is very simple. For the sake of clarity I am using minimized HTML5: while the code will validate, there’s much that could be done to improve its accessibility.

<div id="slideshow-container">
<figure id="slideshow">
<img src="dada-voltaire-tinkerbot.jpg" alt>
<img src="happy-bot-tinkerbot.jpg" alt>
<img src="sgt-swift-tinkerbot.jpg" alt>
<img src="xf-3-fandicaff-tinkerbot.jpg" alt>
</figure>
</div>

The CSS is almost as simple:

@keyframes fadey {
0% { opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; }
}
figure#slideshow { width: 80%; margin: 0 auto; position: relative; }
figure#slideshow img {
position: absolute; left: 0; top: 0;
width: 100%; height: auto; opacity: 0;
}
figure#slideshow img:first-child { position: relative; }

There are a few important points to note:

  • I’m assuming that the responsive images will expand to fill the screen; you could place a max-width limit on the <figure> element if that was not the case.
  • I’ve employed a CSS keyframe animation to create the fade effect for the images. This provides greater ease-of-use in setting the in-out points, compared to Bezier curves in a transition.
  • I’m also assuming you’re using prefix-free or a similar tool to generate the prefixed versions of the keyframe animation.
  • The first image is position: relative to ensure that the <figure> element is the right size and shape for centering; all other elements are position: absolute so that they can be stacked on top of each other.
  • All code is shown in the latest, prefix-free version for clarity.

The Script

The entire animation script is as follows:

window.onload = function() {
imgs = document.getElementById('slideshow').children;
interval = 8000;
currentPic = 0;
imgs[currentPic].style.webkitAnimation = 'fadey '+interval+'ms';
imgs[currentPic].style.animation = 'fadey '+interval+'ms';
var infiniteLoop = setInterval(function(){
imgs[currentPic].removeAttribute('style');
if ( currentPic == imgs.length - 1) { currentPic = 0; } else {currentPic++; }
imgs[currentPic].style.webkitAnimation = 'fadey '+interval+'ms';
imgs[currentPic].style.animation = 'fadey '+interval+'ms';
}, interval);
}

The code should be simple to follow: after referencing the images in the <figure>element, I set the time in milliseconds for every image to animate, and indicate that I want the very first picture to start.

Then, an infinite loop is set up. The style attribute applied to the current image to animate it is removed; and a counter advanced to animate the next one after the appropriate interval has passed.

This code is deliberately limited: I’m only building the animations for recent, vendor-prefix-free versions of Firefox and Internet Explorer, together with versions of Safari and Chrome.

Leading To FullScreen

For understandable reasons, we can’t just force a browser window fullscreen. Rather, it’s easiest to have the content already on the page, and then create a link or button to make that specific content fullscreen and hide the rest. I’ve introduced the fullScreen code before:

function fullScreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.webkitRequestFullscreen ) {
element.webkitRequestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}

The fullscreen request is typically initiated by a link or button:

<a href=# onclick=" fullScreen(document.getElementById(slideshow)) "> Clicky</a>

This can actually work in your favour: by hiding the gallery at the start and only revealing it when fullscreen mode is initiated, you can effectively preload a number of images before the slideshow begins.

Black Backgrounds & Overlarge Images

By default, Firefox expands fullscreen content to its maximum width and fills the background with black. Webkit keeps the black background, but does not increase the image size, instead centering the browser window. This can make fullscreen galleries appear very different, leaving any images extremely large, extending off the bottom edge of the screen while fading in and out over black; not exactly what we are after.

As I’ve previously discussed, every implementation of the FullScreen mode supports a slightly odd pseudo-class that detects if the element is in fullscreen mode. With that in mind, we can do two things. First, make the outer slider-container element fullscreen, rather than its child:

<a href=# onclick="fullScreen(document.getElementById(slideshow-container))">Clicky</a>

Second, ensure that this element has a white background, and centers its children in the window, accounting for a variety of aspect ratios:

#container:fullscreen { display: flex; justify-content: center; align-items: center;}
#container:fullscreen figure { width: 80%; margin: 0 auto; }
:-webkit-fullscreen { width: 100%; height: 100%; }
*:-moz-fullscreen { background: #fff; }

Again, I’m only showing the most recent version of the CSS spec of flexbox to center the content; you can read the entire flexbox code in my article Seven Ways To Center With CSS. Note the separate line for Webkit, necessary to ensure that the fullscreen element covers the black background.

There’s much more we can and will do to this basic setup, but I hope you’ll find this to be a good start.

Photographs courtesy of Tinkerbots, licensed under Creative Commons.

  评论这张
 
阅读(110)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017