Translate

Wednesday 15 October 2014

Display Images in Slider from Database Using Javascript and PHP

Explaination:  

In this tutorial how we can display images from database in a slider.
We can upload multiple images that images is to be stored in DB.Then We can 
dispaly all those images in a slider.


<div id="galleria">
                    <?php
                    $images = explode(",", $holiday_datas['gallary_image']);
                    foreach($images as $imgs){

                    ?> 
                    <a href="<?php echo $path; ?>/<?php echo $imgs; ?>">
                    <img src="<?php echo $path; ?>/<?php echo $imgs; ?>">
                    </a>
                    <?php } ?>
</div>

 We will call as id="anyname" but that name you should be mentioned in the javascript.
 Then We'll fetch the images from Database.Then we will explode that images.
 The explode condition is to be used for that images will be displayed properly 
 in the slider.

Javascript:

<script>
    // Load the classic theme
     Galleria.loadTheme('http://www.javascriptoo.com/application/html/galleria/themes/classic/galleria.classic.min.js');

    // Initialize Galleria
    $('#galleria').galleria({
         autoplay: 7000,
         height: 370,
         transition: 'fadeslide',
         imageCrop: true
    });
    </script>

We should call the id in that javascript.I mentioned the id as galleria so i mentioned there is 
an id as galleria.
Finally we will liclude one jquery file this is to be very usefull for to get the slider in an proper
way

Library File:

<script src="//cdnjs.cloudflare.com/ajax/libs/galleria/1.2.8/galleria.min.js"></script>

Include inside this Library file in head seaction.I hope this tutorial is very usefull for to get images dynamically and it will make as slider.

1 comment:

  1. Dear Friend, it seems simple to use slider, but I want to know if visitor visit the site with slow internet connection, is the slider will work at larger images with no delay timing.

    ReplyDelete