Introduction
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.
Slide show of various Images on an Apex Page can be achieved using HTML, JavaScript, CSS and jQuery.
Steps To Follow
Step1:
Uploading all the images in the Workspace
Shared Components à Files à Images à Create à Select Application name à Choose image file à Upload.
Step2:
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>
Step3:
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>
Call To Action
For Oracle apex development and customization please do visit us..Our company website https://doyensys.com/
Conclusion
Slide show of various Images on an Apex Page can be achieved using above method.
