Hi there,
I have a dynamic image slideshow. I would like to include a page link for each of the images and pass in a parameter ( eg. Company_Id ). I have no idea how or where to do this. I would assume I should include the link code where I build up the P81_IMAGES page item. Please can someone advise me how to do this. Also, if I want to have a different transition effect/slideshow style, how would I accomplish this?
My Code is as follows.
I have a before header process with the following code where I build up a page item with my images (from a collection) that I want to display.
declare
cursor c1 is select c001 src
from apex_collections
where collection_name = 'CO_IMAGES';
v_cnt number := 0;
begin
:p81_images := null;
for img in c1 loop
if v_cnt = 0 then
:p81_images := :p81_images || '<img src="#WORKSPACE_IMAGES#' || img.src || '" alt="Slideshow Image" class="active"/> ';
else
:p81_images := :p81_images || '<img src="#WORKSPACE_IMAGES#' || img.src || '" alt="Slideshow Image" /> ';
end if;
v_cnt := v_cnt + 1;
end loop;
end;
I have an HTML region where I display the slideshow using the Page Item Value (P81_IMAGES). The Region source contains the following.
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
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}, 3000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 2000 );
});
</script>
<style type="text/css">
/*** set the width and height to match your images **/
#slideshow {
position:relative;
height:400px;
width:460px ;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
</style>
<div id="slideshow">
&P81_IMAGES.
</div>
I will really appreciate it if someone can guide me here.
Regards
Dominic