Friday, 7 August 2015

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 2Source 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.

2 comments:

  1. Regards
    Sridevi Koduru (Senior Oracle Apps Trainer Oracleappstechnical.com)
    LinkedIn profile - https://in.linkedin.com/in/sridevi-koduru-9b876a8b
    Please Contact for One to One Online Training on Oracle Apps Technical, Financials, SCM, SQL, PL/SQL, D2K at training@oracleappstechnical.com | +91 - 9581017828.

    ReplyDelete
  2. I want the slider to appear at the end of the page, how can I do that?

    ReplyDelete