I am using jwplayer and yoxview plugin for streaming local videos and awshowcase plugin to have a sliding effect. But there is a problem the videos in the first div.thumbnails is working properly while if i slide to any other div.thumbnails and clicks on to the video it shows "Object not found!" page. Please help me out...I'm stuck
Here is my code:
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>
<script type="text/javascript" src="scripts/jquery.aw-showcase.min.js"></script>
<script type="text/javascript" src="jwplayer/jwplayer.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#showcase").awShowcase(
{
content_width: 1024,
content_height: 470,
fit_to_parent: true,
auto: false,
interval: 3000,
continuous: false,
loading: true,
arrows: true,
buttons: false,
btn_numbers: false,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: true,
transition: 'hslide', /* hslide/vslide/fade */
transition_speed: 500,
transition_delay: 300,
show_caption: 'onhover', /* onload/onhover/show */
thumbnails: false,
thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'horizontal', /* vertical/horizontal */
thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: true, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: false, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
});
$(".thumbnails").yoxview({
flashVideoPlayer: 'jwplayer',
flashVideoPlayerPath: 'jwplayer/player.swf',
renderInfoExternally: true
});
});
</script>
<div id="showcase" class="showcase">
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<!-- Put the slide content in a div with the class .showcase-content. -->
<div class="showcase-content">
<!-- If the slide contains multiple elements you should wrap them in a div with the class .showcase-content-wrapper. -->
<div class="showcase-content-wrapper">
<!-- For dynamic height to work in webkit you need to set the width and height of images in the source.
Usually works to only set the dimension of the first slide in the showcase. -->
<div class="thumbnails">
<a href="media/2.flv?image=media/thumbnails/2.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/2.jpg" alt="First" title="The first image" /></a>
<a href="media/3.flv?image=media/thumbnails/3.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/3.jpg" alt="First" title="The SECOND image" /></a>
<a href="media/4.flv?image=media/thumbnails/4.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/4.jpg" alt="First" title="The THIRD image" /></a>
<a href="media/5.flv?image=media/thumbnails/5.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/5.jpg" alt="First" title="The fourth image" /></a>
<a href="media/6.flv?image=media/thumbnails/6.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/6.jpg" alt="First" title="The FIFTH image" /></a>
<a href="media/1.flv?image=media/thumbnails/1.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/1.jpg" alt="First" title="The SIXTH image" /></a>
</div>
</div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
<div class="showcase-content-wrapper">
<div class="thumbnails">
<a href="media/1.flv?image=media/thumbnails/1.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/1.jpg" alt="First" title="The first image" /></a>
<a href="media/2.flv?image=media/thumbnails/2.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/2.jpg" alt="First" title="The SECOND image" /></a>
<a href="media/3.flv?image=media/thumbnails/3.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/3.jpg" alt="First" title="The THIRD image" /></a>
<a href="media/4.flv?image=media/thumbnails/4.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/4.jpg" alt="First" title="The fourth image" /></a>
<a href="media/5.flv?image=media/thumbnails/5.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/5.jpg" alt="First" title="The FIFTH image" /></a>
<a href="media/6.flv?image=media/thumbnails/6.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/6.jpg" alt="First" title="The SIXTH image" /></a>
</div>
</div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
<div class="showcase-content-wrapper">
<div class="thumbnails">
<a href="media/1.flv?image=/media/thumbnails/1.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/1.jpg" alt="First" title="The first image" /></a>
<a href="media/2.flv?image=/media/thumbnails/2.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/2.jpg" alt="First" title="The SECOND image" /></a>
<a href="media/3.flv?image=/media/thumbnails/3.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/3.jpg" alt="First" title="The THIRD image" /></a>
<a href="media/4.flv?image=media/thumbnails/4.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/4.jpg" alt="First" title="The fourth image" /></a>
<a href="media/5.flv?image=media/thumbnails/5.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/5.jpg" alt="First" title="The FIFTH image" /></a>
<a href="media/6.flv?image=media/thumbnails/6.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/6.jpg" alt="First" title="The SIXTH image" /></a>
</div>
</div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
<div class="showcase-content-wrapper">
<div class="thumbnails">
<a href="media/1.flv?image=/media/thumbnails/1.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/1.jpg" alt="First" title="The first image" /></a>
<a href="media/2.flv?image=/media/thumbnails/2.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/2.jpg" alt="First" title="The SECOND image" /></a>
<a href="media/3.flv?image=/media/thumbnails/3.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/3.jpg" alt="First" title="The THIRD image" /></a>
<a href="media/4.flv?image=media/thumbnails/4.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/4.jpg" alt="First" title="The fourth image" /></a>
<a href="media/5.flv?image=media/thumbnails/5.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/5.jpg" alt="First" title="The FIFTH image" /></a>
<a href="media/6.flv?image=media/thumbnails/6.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/6.jpg" alt="First" title="The SIXTH image" /></a>
</div>
</div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
<div class="showcase-content-wrapper">
<div class="thumbnails">
<a href="media/1.flv?image=/media/thumbnails/1.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/1.jpg" alt="First" title="The first image" /></a>
<a href="media/2.flv?image=/media/thumbnails/2.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/2.jpg" alt="First" title="The SECOND image" /></a>
<a href="media/3.flv?image=/media/thumbnails/3.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/3.jpg" alt="First" title="The THIRD image" /></a>
<a href="media/4.flv?image=media/thumbnails/4.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/4.jpg" alt="First" title="The fourth image" /></a>
<a href="media/5.flv?image=media/thumbnails/5.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/5.jpg" alt="First" title="The FIFTH image" /></a>
<a href="media/6.flv?image=media/thumbnails/6.jpg&width=640&height=480"><img src="jwplayer/media/thumbnails/6.jpg" alt="First" title="The SIXTH image" /></a>
</div>
</div>
</div>
</div>
</div>