APEX photo slider Code
Region PL/SQL Code:
declare
cursor c_gallery_img is
select ATTACHMENT_RECID ID
from GN_ATTACHMENT;
l_buffer varchar2(30000);
l_link varchar2(512) := 'f?p='||:APP_ID||':
0:'||:APP_SESSION||':APPLICATION_PROCESS=GETIMAGE:::FILE_ID:';
begin
l_buffer := '<!-- Jssor Slider Begin -->
<!-- To move inline styles to css file/block, please specify a class name for each
element. -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 800px;
height: 456px; background: #191919; overflow: hidden;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; background: url(../img/loading.gif)
no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width:
800px; height: 356px; overflow: hidden;">';
sys.htp.p(l_buffer);
for r_gallery_img in c_gallery_img
loop
sys.htp.p('<div>');
sys.htp.p('<img u="image" src="'||l_link||r_gallery_img.id||'" />');
sys.htp.p('<img u="thumb" src="'||l_link||r_gallery_img.id||'" />');
sys.htp.p('</div>');
end loop;
sys.htp.p('</div>');
l_buffer := '<!--#region Arrow Navigator Skin Begin -->
<!-- Arrow Left -->
<span u="arrowleft" class="jssora05l" style="top: 158px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora05r" style="top: 158px; right: 8px">
</span>
<!--#endregion Arrow Navigator Skin End -->
<!--#region Thumbnail Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-thumbnail-navigator-
jquery.html -->
<!-- thumbnail navigator container -->
<div u="thumbnavigator" class="jssort01" style="left: 0px; bottom: 0px;">
<!-- Thumbnail Item Skin Begin -->
<div u="slides" style="cursor: default;">
<div u="prototype" class="p">
<div class="w"><div u="thumbnailtemplate" class="t"></div></div>
<div class="c"></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!--#endregion Thumbnail Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">Image Slider</a>
</div>
<!-- Jssor Slider End -->';
sys.htp.p(l_buffer);
end;
Inline CSS:
<style type="text/css">
/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l (normal)
.jssora05r (normal)
.jssora05l:hover (normal mouseover)
.jssora05r:hover (normal mouseover)
.jssora05l.jssora05ldn (mousedown)
.jssora05r.jssora05rdn (mousedown)
*/
.jssora05l, .jssora05r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 40px;
cursor: pointer;
background: url(#APP_IMAGES#a17.png) no-repeat;
overflow: hidden;
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }
/* jssor slider thumbnail navigator skin 01 css */
/*
.jssort01 .p (normal)
.jssort01 .p:hover (normal mouseover)
.jssort01 .p.pav (active)
.jssort01 .p.pdn (mousedown)
*/
.jssort01 {
position: absolute;
/* size of thumbnail navigator container */
width: 800px;
height: 100px;
.jssort01 .p {
position: absolute;
top: 0;
left: 0;
width: 72px;
height: 72px;
.jssort01 .t {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
.jssort01 .w {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
.jssort01 .c {
position: absolute;
top: 0px;
left: 0px;
width: 68px;
height: 68px;
border: #000 2px solid;
box-sizing: content-box;
background: url(#APP_IMAGES#t01.png) -800px -800px no-repeat;
_background: none;
.jssort01 .pav .c {
top: 2px;
_top: 0px;
left: 2px;
_left: 0px;
width: 68px;
height: 68px;
border: #000 0px solid;
_border: #fff 2px solid;
background-position: 50% 50%;
.jssort01 .p:hover .c {
top: 0px;
left: 0px;
width: 70px;
height: 70px;
border: #fff 1px solid;
background-position: 50% 50%;
.jssort01 .p.pdn .c {
background-position: 50% 50%;
width: 68px;
height: 68px;
border: #000 2px solid;
* html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c {
/* ie quirks mode adjust */
width /**/: 72px;
height /**/: 72px;
</style>
HTML Header:
<!-- <script type="text/javascript" src="a161637/r/1357/files/static/v24/
jquery-1.9.1.min.js"></script> -->
<!-- <script type="text/javascript" src="a161637/r/1357/files/static/v24/jssor.js"></script>
-->
<!-- <script type="text/javascript" src="a161637/r/1357/files/static/v24/jssor.slider.js"></
script> -->
<script type="text/javascript" src="a161637/r/files/static/v4/jquery-1.11.3.min.js"></
script>
<script type="text/javascript" src="a161637/r/files/static/v4/jssor.slider-21.1.6.min.js"></
script>
<script type="text/javascript" src="a161637/r/files/static/v4/jssor.slider-21.1.6.mini.js"></
script>
<script>
jQuery(document).ready(function ($) {
var _SlideshowTransitions = [
//Fade in L
{$Duration: 1200, x: 0.3, $During: { $Left: [0.3, 0.7] }, $Easing: { $Left:
$JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
//Fade out R
, { $Duration: 1200, x: -0.3, $SlideOut: true, $Easing: { $Left: $JssorEasing$.
$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
//Fade in R
, { $Duration: 1200, x: -0.3, $During: { $Left: [0.3, 0.7] }, $Easing: { $Left:
$JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
//Fade out L
, { $Duration: 1200, x: 0.3, $SlideOut: true, $Easing: { $Left: $JssorEasing$.
$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
//Fade in T
, { $Duration: 1200, y: 0.3, $During: { $Top: [0.3, 0.7] }, $Easing: { $Top:
$JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2,
$Outside: true }
//Fade out B
, { $Duration: 1200, y: -0.3, $SlideOut: true, $Easing: { $Top: $JssorEasing$.
$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true }
//Fade in B
, { $Duration: 1200, y: -0.3, $During: { $Top: [0.3, 0.7] }, $Easing: { $Top:
$JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
//Fade out T
, { $Duration: 1200, y: 0.3, $SlideOut: true, $Easing: { $Top: $JssorEasing$.
$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
//Fade in LR
, { $Duration: 1200, x: 0.3, $Cols: 2, $During: { $Left: [0.3, 0.7] }, $ChessMode: {
$Column: 3 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.
$EaseLinear }, $Opacity: 2, $Outside: true }
//Fade out LR
, { $Duration: 1200, x: 0.3, $Cols: 2, $SlideOut: true, $ChessMode: { $Column: 3
}, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear },
$Opacity: 2, $Outside: true }
//Fade in TB
, { $Duration: 1200, y: 0.3, $Rows: 2, $During: { $Top: [0.3, 0.7] }, $ChessMode:
{ $Row: 12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.
$EaseLinear }, $Opacity: 2 }
//Fade out TB
, { $Duration: 1200, y: 0.3, $Rows: 2, $SlideOut: true, $ChessMode: { $Row:
12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.
$EaseLinear }, $Opacity: 2 }
//Fade in LR Chess
, { $Duration: 1200, y: 0.3, $Cols: 2, $During: { $Top: [0.3, 0.7] }, $ChessMode:
{ $Column: 12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.
$EaseLinear }, $Opacity: 2, $Outside: true }
//Fade out LR Chess
, { $Duration: 1200, y: -0.3, $Cols: 2, $SlideOut: true, $ChessMode: { $Column:
12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.
$EaseLinear }, $Opacity: 2 }
//Fade in TB Chess
, { $Duration: 1200, x: 0.3, $Rows: 2, $During: { $Left: [0.3, 0.7] }, $ChessMode:
{ $Row: 3 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.
$EaseLinear }, $Opacity: 2, $Outside: true }
//Fade out TB Chess
, { $Duration: 1200, x: -0.3, $Rows: 2, $SlideOut: true, $ChessMode: { $Row:
3 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.
$EaseLinear }, $Opacity: 2 }
//Fade in Corners
, { $Duration: 1200, x: 0.3, y: 0.3, $Cols: 2, $Rows: 2, $During: { $Left: [0.3, 0.7],
$Top: [0.3, 0.7] }, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left:
$JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity:
$JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true }
//Fade out Corners
, { $Duration: 1200, x: 0.3, y: 0.3, $Cols: 2, $Rows: 2, $During: { $Left: [0.3, 0.7],
$Top: [0.3, 0.7] }, $SlideOut: true, $ChessMode: { $Column: 3, $Row: 12 }, $Easing:
{ $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity:
$JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true }
//Fade Clip in H
, { $Duration: 1200, $Delay: 20, $Clip: 3, $Assembly: 260, $Easing: { $Clip:
$JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
//Fade Clip out H
, { $Duration: 1200, $Delay: 20, $Clip: 3, $SlideOut: true, $Assembly: 260,
$Easing: { $Clip: $JssorEasing$.$EaseOutCubic, $Opacity: $JssorEasing$.$EaseLinear },
$Opacity: 2 }
//Fade Clip in V
, { $Duration: 1200, $Delay: 20, $Clip: 12, $Assembly: 260, $Easing: { $Clip:
$JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
//Fade Clip out V
, { $Duration: 1200, $Delay: 20, $Clip: 12, $SlideOut: true, $Assembly: 260,
$Easing: { $Clip: $JssorEasing$.$EaseOutCubic, $Opacity: $JssorEasing$.$EaseLinear },
$Opacity: 2 }
];
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to
enable slideshow, this option must be set to true, default value is false
$AutoPlayInterval: 1500, //[Optional] Interval (in milliseconds)
to go for next slide since the previous stopped if the slider is auto playing, default value is
3000
$PauseOnHover: 1, //[Optional] Whether to pause when
mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch
device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch
device, 12 freeze for desktop and touch device, default value is 1
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0
no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation
should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking
position is not 0)
$ArrowKeyNavigation: true, //[Optional] Allows keyboard
(arrow key) navigation or not, default value is false
$SlideDuration: 800, //Specifies default duration (swipe) for
slide in milliseconds
$SlideshowOptions: { //[Optional] Options to specify and
enable slideshow or not
$Class: $JssorSlideshowRunner$, //[Required] Class to create
instance of slideshow
$Transitions: _SlideshowTransitions, //[Required] An array of slideshow
transitions to play slideshow
$TransitionsOrder: 1, //[Optional] The way to choose
transition to play slide, 1 Sequence, 0 Random
$ShowLink: true //[Optional] Whether to bring slide link
on top of the slider when slideshow is running, default value is false
},
$ArrowNavigatorOptions: { //[Optional] Options to specify and
enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow
navigator instance
$ChanceToShow: 1 //[Required] 0 Never, 1 Mouse Over, 2
Always
},
$ThumbnailNavigatorOptions: { //[Optional] Options to specify and
enable thumbnail navigator or not
$Class: $JssorThumbnailNavigator$, //[Required] Class to create
thumbnail navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2
Always
$ActionMode: 1, //[Optional] 0 None, 1 act by click, 2 act
by mouse hover, 3 both, default value is 1
$SpacingX: 8, //[Optional] Horizontal space between
each thumbnail in pixel, default value is 0
$DisplayPieces: 10, //[Optional] Number of pieces to
display, default value is 1
$ParkingPosition: 360 //[Optional] The offset position to park
thumbnail
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while
window resizes
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
else
window.setTimeout(ScaleSlider, 30);
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
