Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

Create a full-screen image gallery with jQuery

Engage the Super Sized jQuery plug-in to create a stunning fullscreen image gallery

Download the jQuery plug-in

Download the jQuery plug-in ‘Super Sized’ from buildinternet.com/project/supersized and unzip. This provides the core functionality for fullscreen slide shows. Create a new web page and save it inside the ‘slideshow’ folder of the downloaded folder. Add the following links to the CSS files which power the look and feel of the full size image slide show.

001 <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
002 <link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />

Link the code up

Now add the following code in the head section of the page, which links to the relevant jQuery code, the plug-in and an easing library. These are all important script sources that will enable the slide show to run in the background of the page that you place them on. Because it runs in the background you can place any content you like over the top of the page.

001 script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
002 script type="text/javascript" src="js/jquery.easing.min.js"></script>
003 script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
004 script type="text/javascript" src="theme/supersized.shutter.min.js"></script>

Set the slide show

To start the slide show we call the jQuery function, then the supersized function. Inside the supersized function we can place our default settings. Here we’ve set autoplay to false and told the slide links to open in a blank window so that the main page stays open behind it. The last option is the actual slides that will be shown in the background.

001 <script type="text/javascript">
002 jQuery(function($){
003     $.supersized({
004    autoplay : 0, slide_links :     'blank', slides : [

Add the slides

Copy the remaining code in to add the slides. Be sure to put your own image and link in here for when the page is clicked on. To add more slides, simply copy the first line shown for each slide. The square bracket closes the slides, while the remaining brackets closed the supersized and jQuery functions respectively.

001 {image : 'image_url_here', url :     'link_url_here'},
002             ]
003     });
004 });
005 </script>

Adding control

Anywhere in the body section of the page, add the following links. These will give navigation links for each side of the screen to cycle through the slides that we added in the previous step. Save this, and test in your browser to check it has worked. Remember, just add any content to the body section to create your page over the top of this.

001 <a id="prevslide"></a>
002 <a id="nextslide"></a>

TECHNIQUE: CREATE FULL SCREEN IMAGES

Currently the most common size screen resolution for when people are browsing web pages is 1,280×800 but with some monitors boasting 1,920×1,080 so it becomes difficult to know what size to make your images for fullscreen display.

What size image?

The first point to remember when creating full screen images is that there are no hard and fast rules here. Image size can go as low as 1,024×760 without looking too bad on larger monitors, so don’t think you have to go for 1,920×1,080.

Content counts

Images that have large areas of colour that is similar, and those that have blurry coloured areas or have out-of-focus backgrounds will compress better and not look too blocky when viewed on larger monitors.

Compression ratio

Make sure you use the preview window in Photoshop for compressing to JPEG when saving for the web. It should not look blocky from over-compression, and try to go for as high a setting as the image will allow. This will mean the images scale better.

×