Fork me on GitHub
Post Format

jQuery Image Slider Plugin: Smart Background Slider

Smart background image slider is a search engine friendly simple jquery slider plugin that works like any other image slider with the difference that it runs in the background. Smart background image slider plugin supports playback controls which you can use to play/pause the slideshow and navigate directly to particular slide, also it gives you index and image source on each image change via callback function.

One of the major advantages of using Smart background image slider plugin is that you can put your markups and text within the body of element as well as if you like you can convert existing element to image slider.

Smart background image slider plugin Features
  • Search engine friendly
  • Attachable to existing elements
  • Runs in background
Using Smart background image slider plugin

In your HTML file add the following in the head section.

  • Add a reference to latest jQuery script
  • Add a reference to bgslider.js file
  • Add a reference to bgslider.css

Add a block element (div) within the body of your HTML file and assign some id to it(this is just for demonstration purpose, you can use any selector). You can also use existing element.


Finally add the following code to your HTML file’s head section.

    <script type="text/javascript">
           $(document).ready(function() {
            $('#gallery').bgslider({
                images: "[{ image: 'images/k2-in-skies.jpg', title: 'k2 covered in clouds' }, { image: 'images/k2.jpg', title: 'k2 standing tall' }, { image: 'images/kunhar-river.jpg', title: 'river kunhar flowing' }," +
                 "{ image: 'images/mitre-peak-baltoro.jpg', title: 'baltoro glacier' }, { image: 'images/musa-ka-musalla.jpg', title: 'musa ka musalla' }, { image: 'images/nanga-parbat.jpg', title: 'nanga parbat' }," +
                  "{ image: 'images/naran-valley.jpg', title: 'naran valley' }, { image: 'images/shugran.jpg', title: 'beauty of shugran' }]",
                speed: 5000,
                loading: 'loading.gif',
                preloadall: true,
                onslidechange: function(src, index) {
                    $('#contents').html(text[index]);
                }
            });
        });       
        </script>
Smart background image slider plugin Parameters
  • images: JSON string of images e.g.”[{image:'image url',title:'image title'},{image:'image url',title:'image title'}]“
  • speed: delay in miliseconds between switching images e.g 5000
  • loading: loading image e.g ‘loading.gif’
  • preloadall: if true loading indicator will be displayed until all images are loaded. false is the default value
  • onslidechange: callback function with two parameters “src” and “index” to be called on each image change

Here is the complete source for the example above.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Background Image Slider</title>

    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>

    <script src="bgslider.js" type="text/javascript"></script>

    <link href="bgslider.css" rel="stylesheet" type="text/css" />

    <script src="bgslider.js" type="text/javascript"></script>

    <script type="text/javascript">
        var text = ['<p>K2 is the second-highest mountain on Earth after Mount Everest. With a peak elevation of 8,611 metres (28,251 ft), K2 is part of the Karakoram Range, and is located on the border between the Taxkorgan Tajik Autonomous County of Xinjiang, China, and Gilgit, in Gilgit-Baltistan of Pakistan.</p>' +
                    '<p>K2 is known as the Savage Mountain due to the difficulty of ascent and the 2nd highest fatality rate among the "eight thousanders" for those who climb it. For every four people who have reached the summit, one has died trying.[4] Unlike Annapurna, the mountain with the highest fatality rate, K2 has never been climbed in winter.</p>' +
                    '<p>K2 is known as the Savage Mountain due to the difficulty of ascent and the 2nd highest fatality rate among the "eight thousanders" for those who climb it. For every four people who have reached the summit, one has died trying.[4] Unlike Annapurna, the mountain with the highest fatality rate, K2 has never been climbed in winter.</p>',
                    '<p>The Kunhar River also known as Nain Sukh Persian: "eyes repose" is 166 kilometers (103 miles) long river, located in Khyber Pakhtunkhwa, Pakistan. The river originates from Lulusar lake, nearly 48km from Naran Valley.</p>' +
                    '<p>Waters of Dudipat and Saiful Muluk lakes feed the river besides glacial waters from Malka Parbat and other high peaks in the valley. Kunhar flows through entire Kaghan Valley through Jalkhad, Naran Valley, Kaghan, Balakot, Garhi Habibullah and joins Jhelum River just outside Muzaffarabad in Azad Jammu and Kashmir.</p>' +
                    '<p>The Kunhar River also known as Nain Sukh Persian: "eyes repose" is 166 kilometers (103 miles) long river, located in Khyber Pakhtunkhwa, Pakistan. The river originates from Lulusar lake, nearly 48km from Naran Valley.</p>' +
                    '<p>Waters of Dudipat and Saiful Muluk lakes feed the river besides glacial waters from Malka Parbat and other high peaks in the valley. Kunhar flows through entire Kaghan Valley through Jalkhad, Naran Valley, Kaghan, Balakot, Garhi Habibullah and joins Jhelum River just outside Muzaffarabad in Azad Jammu and Kashmir.</p>',
                    '<p>The Baltoro Glacier, at 62 kilometers long, is one of the longest glaciers outside the polar regions[1]. It is located in Baltistan, in the Gilgit-Baltistan region of Pakistan, and runs through part of the Karakoram mountain range. The Baltoro Muztagh lies to the north and east of the glacier, while the Masherbrum Mountains lie to the south. At 8,611 m (28,251 ft), K2 is the highest mountain in the region, and three others within 20 km top 8,000 m.</p>' +
                    '<p>The trough of this glacier is very wide. Small valley glaciers form icefalls where they meet the trunk glacier. The sidewalls vary from very steep to precipitous. The glacier has carved striations on the surrounding country rocks. Moving ice has formed depressions, which serve as basins for numerous glacial lakes.</p>' +                    
                    '<p>The trough of this glacier is very wide. Small valley glaciers form icefalls where they meet the trunk glacier. The sidewalls vary from very steep to precipitous. The glacier has carved striations on the surrounding country rocks. Moving ice has formed depressions, which serve as basins for numerous glacial lakes.</p>',
                    '<p>Musa Ka Musala is a mountain situated 150 kilometres (93 mi) north of the city of Abbottabad in Himalayas, Pakistan. A road from Shinkiari, a tehsil of District Mansehra, leads up to Munda Gacha with a distance of 40 kilometres (25 mi), and then a trek gets started from Munda Gacha to Khorri and Gali.</p>' +
                    '<p>The mountain is 4,076 metres (13,400 ft) above sea level and can be seen from places 200 kilometres (120 mi) away. The mount has the appearance of a prayer mat is and is thus named Musa Ka Musala, meaning Moses prayer mat. The mountain is icescaped all year long. The mountain top is considered a ziarat {Islamic shrine} by the localites, as a shepherd, in old times, used to offer his daily prayers at the peak. The mountain is surrounded by Khunda (Gali) Peak, which very much resembles K2.</p>',
                    '<p>Nanga Parbat is the ninth highest mountain on Earth and among the eight-thousanders with a summit elevation of 8,126 meters (26,660 ft). Nanga Parbat translates to "Naked Mountain" in English; parbat deriving from the Sanskrit word parvata meaning "mountain, rock", and nanga an Urdu word meaning "naked".[2] Known as the "Killer Mountain", Nanga Parbat was one of the deadliest of the eight-thousanders for climbers in the first half of the twentieth century; since that time it has been less so, though still an extremely serious climb.</p>' +
                    '<p>The core of Nanga Parbat is a long ridge trending southwest-northeast. The ridge is an enormous bulk of ice and rock. It has three faces, Diamir face, Rakhiot and Rupal. The southwestern portion of this main ridge is known as the Mazeno Wall, and has a number of subsidiary peaks. In the other direction, the main ridge arcs northeast at Rakhiot Peak (7,070 m / 23,196 ft). The south/southeast side of the mountain is dominated by the massive Rupal Face, noted above. The north/northwest side of the mountain, leading to the Indus, is more complex. It is split into the Diamir (west) face and the Rakhiot (north) face by a long ridge. There are a number of subsidiary summits, including North Peak (7,816 m / 25,643 ft) some 3 km north of the main summit. Near the base of the Rupal Face is a beautiful glacial lake called Latbo, above a seasonal shepherds village of the same name.</p>',
                    '<p>Naran Valley is located in Khyber-Pakhtunkhwa, Pakistan. The Kunhar River, swollen by glacier melt, meanders its way through the Naran Valley. Makra Peak, Malka Parbat, Lalazar and Saiful Muluk are the main attractions.</p>' +
                    '<p>Naran is a village located in Kaghan Valley, Mansehra District of Khyber-Pakhtunkhwa province of Pakistan. The Kunhar River, swollen by glacier melt, passes through this village as it meanders its way through the valley.</p>' +
                    '<p>Naran Valley is located in Khyber-Pakhtunkhwa, Pakistan. The Kunhar River, swollen by glacier melt, meanders its way through the Naran Valley. Makra Peak, Malka Parbat, Lalazar and Saiful Muluk are the main attractions.</p>' +
                    '<p>Naran is a village located in Kaghan Valley, Mansehra District of Khyber-Pakhtunkhwa province of Pakistan. The Kunhar River, swollen by glacier melt, passes through this village as it meanders its way through the valley.</p>',
                    '<p>Shogran is a village situated on a green plateau in the Naran Valley, northern Pakistan at a height of 2,362 meters above sea level. The village was affected by the earthquake of 2005 when some building were damaged.[1] It is only 10 km from Kiwai village and 34 km from Balakot. The road from Islamabad to Kiwai is metalled and measures 212 km. From Shogran, you can ride a jeep or horse or hike to several picturesque places like Siri, Paye and Makra Peak. Hotels and motels are easily available at affordable costs. The local people are friendly and helpful.</p>' +
                    '<p>Shogran is a village situated on a green plateau in the Naran Valley, northern Pakistan at a height of 2,362 meters above sea level. The village was affected by the earthquake of 2005 when some building were damaged.[1] It is only 10 km from Kiwai village and 34 km from Balakot. The road from Islamabad to Kiwai is metalled and measures 212 km. From Shogran, you can ride a jeep or horse or hike to several picturesque places like Siri, Paye and Makra Peak. Hotels and motels are easily available at affordable costs. The local people are friendly and helpful.</p>'
                    ];
        $(document).ready(function() {
            $('#gallery').bgslider({
                images: "[{ image: 'images/k2-in-skies.jpg', title: 'k2 covered in clouds' }, { image: 'images/k2.jpg', title: 'k2 standing tall' }, { image: 'images/kunhar-river.jpg', title: 'river kunhar flowing' }," +
                 "{ image: 'images/mitre-peak-baltoro.jpg', title: 'baltoro glacier' }, { image: 'images/musa-ka-musalla.jpg', title: 'musa ka musalla' }, { image: 'images/nanga-parbat.jpg', title: 'nanga parbat' }," +
                  "{ image: 'images/naran-valley.jpg', title: 'naran valley' }, { image: 'images/shugran.jpg', title: 'beauty of shugran' }]",
                speed: 5000,
                loading: 'loading.gif',
                preloadall: true,
                onslidechange: function(src, index) {
                    $('#contents').html(text[index]);
                }
            });
        });       
    </script>

    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
            width: 100%;
            background-color: #000;
        }
        #gallery
        {
            margin: 0;
            padding: 0;
            width: 100%; 
        }
        #gallery #outer
        {
            margin: auto;
            padding-top: 80px;
        }
        #gallery #wrapper
        {
            width: 800px;
            height: 400px;
            background-color: #fff;
            padding-top: 8px;
            padding-right: 8px;
            padding-left: 8px;
            margin: auto;
            filter: alpha(opacity=30);
            opacity: 0.3;
            border-radius: 12px;
            -moz-border-radius: 12px;
        }
        #gallery #wrapper #contents
        {
            background-color: #000;
            width: 760px;
            height: 350px;
            filter: alpha(opacity=90);
            opacity: 0.9;
            color: White;
            padding: 20px;
            line-height: 1.7em;
        }
    </style>
</head>
<body>
    <div id="gallery">
        <div id="outer">
            <div id="wrapper">
                <div id="contents">
                </div>
            </div>
        </div>
    </div>
</body>
</html>


No related posts.

10 comments

  1. Is it posssible to add more images. i tried but it did not work.Is it possible to run a seperate slide show in the contents insted of text.
    thanks

    Reply
  2. John Reynolds

    06/06/2012 @ 7:57 pm

    Do you have a hack that would allow it to start right away? If you have the speed set to 5000, it won’t start for 5s. Looking to have it start right away.

    Reply
  3. Hi,
    First at all thanks for the the info on your site.
    I working on a site working with a bgslider but i get a little problem all the picture are 1900px with what it is good for big screen but whe people are using a small resolution 1024px they see only half of the background. Do you know a function of js working can resize th e picture depending of the screen resolution before to execute bgsilder.
    Thanks

    Reply

Leave a Reply

Required fields are marked *.


9 × three =