SLIDESHOW OF IMAGES IN APEX

Websites that include many images, such as art or photo gallery sites, can benefit by presenting some (or all) of their images in slide show format. 

Slideshow of various Images on an Apex Page can be achieved using HTML, JavaScript, CSS and jQuery.

Step 1: Uploading all the images in the Workspace

Shared ComponentsàFilesàImagesàCreateàSelect Application nameàChoose image fileàUpload.

Step 2: Source code

Give the following code in the Page Region source. Make sure that all the images are uploaded in the Workspace.

Source Code:

<div id="slideshow">   //opening the Slider division 

        

<img src="#WORKSPACE_IMAGES#Office2.jpg" alt="Slideshow Image 1" class="active" width="1100px;" height="550px;"/>  // calling the first image from workspace and width, height has been defined.

<img src="#WORKSPACE_IMAGES#2aioug.JPG" alt="Slideshow Image 1" class="active" width="1100px;" height="550px;"/>  // calling the Second image from workspace and width, height has been defined.

<img src="#WORKSPACE_IMAGES#3bay1.jpg" alt="Slideshow Image 2" class="active" width="1100px;" height="550px;"/>  // calling the Third  image from workspace and width, height has been defined.

<img src="#WORKSPACE_IMAGES#4loveDoyensys1.jpg" alt="Slideshow Image 3" width="1100px;" height="550px;" />  // calling the Fourth image from workspace and width, height has been defined.

<img src="#WORKSPACE_IMAGES#5bay2.jpg" alt="Slideshow Image 4" width="1100px;" height="550px;"/> // calling the fifth image from workspace and width, height has been defined.

<img src="#WORKSPACE_IMAGES#6cricket.jpg" alt="Slideshow Image 4" width="1100px;" height="550px;"/>  // calling the Sixth image from workspace and width, height has been defined.</div>

Step 3: Give the below code on the HTML header

</script> //within the script tag the division name will be called using JQUERY

<script type="text/javascript">

    function slideSwitch() {  //Opening  the function 

        var $active = $('#slideshow IMG.active'); 

        if ($active.length == 0) $active = $('#slideshow IMG:last');

        var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');

      $active.addClass('last-active');

        $next.css({

            opacity: 0.0

        }).addClass('active').animate({

            opacity: 1.0

        }, 1000, function() {

            $active.removeClass('active last-active');

        });

    }

    $(function() {

        setInterval("slideSwitch()", 4000); //interval time for the images sliding has defined

    });

</script>

<style type="text/css">  //styles for the divisions are defined

    #slideshow {

        position: relative;

        height: 380px;

    }

 #slideshow IMG {

        position: absolute;

        left: 120px;

        top: 0px;

        z-index: 8;

        opacity: 0.0;

    }

  #slideshow IMG.active {

        z-index: 10;

        opacity: 1.0;

    }

   #slideshow IMG.last-active {

        z-index: 9;

    }

</style>

</script>

OUTPUT:

All the Images uploaded in the Workspace are presented in the Slideshow Format.