Interactive Design Techniques

jQuery Full Screen 1
jQuery Full Screen 2
jQuery Full Screen 3
jQuery Full Screen 4
jQuery Full Screen 5

Full Screen jQuery Slideshow

A responsive full screen slide show we did for a gardening project using jQuery. Sometimes all you need to do is show a series of images with brief captions, so why not take advantage of the full screen instead of just using a little portion of it? You can show your images much larger, and you’re eliminating all other distractions from the rest of the screen background.

We used this version of the slide show with single images, so in this example the captions are included in the graphics. But you wouldn’t need to stop there, and what would be nice is to develop this further with CSS / HtML elements. The idea would be to keep these elements as simple and responsive as possible, so the main focus would still be on the images with as few distractions as possible.

One of our favorite things about this script is that it works great on mobile devices, so you can also check it out on your smart phone.


Creating a Full Screen Photo Archive Site
Using a combination of Bootstrap and vector font icons to keep the interface very condensed and refined, you could develop more of a full web site around this concept – by providing simple navigation which would link to additional slide shows. Each link would be a different category or topic, and each slideshow would be analogous to a series of pages within that category.

The following site illustrates that technique – using a somewhat different approach than the above example. The narrow archive menu stays at the base of the page so it’s very unobtrusive. This also allows you to have landing pages introducing each topic or category.

Note that in either of these two examples you can also use the left or right arrow keys on your keyboard to cycle through the images.


Share Your Comments