Carousel slideshow?

Does anyone know of a stand alone program which displays photographs in a carousel format using the full screen, no menu bar etc? There is software (Carousel Slideshow II) which can be included in a web page, and PhotoPresenter has a carousel feature with limited picture size and mirror effect, but I have not been able to find a program with a carousel feature using screen full height or width. Any suggestions?

Hi Mario, the breadcrumbs makes three:
Home › Slide 1
Slide 1
Slide 1
I don't mind having the breadcrumbs but I don't want TWO titles.
This is a default feature (bug?) of the Adora template. I have created a test 'untouched' copy of the Adora template here:
http://adoraspare.businesscatalyst.com/
Click on any of the slides and you'll see what I mean. I can't find a spare title tag anywhere.

Similar Messages

A carousel slideshow application.

I apologise if this is the wrong forum but I can't se a more appropriate one.
Does anyone know of a stand alone program which displays photographs in a carousel format using the full screen, no menu bar etc? There is software (Carousel Slideshow II) which can be included in a web page, and PhotoPresenter has a carousel feature with limited picture size and mirror effect, but I hace not been able to find a program with a carousel feature using screen full height or width. Any suggestions?

Hi,
My wife (Yes! she is another Hyperion-er too) has built such application like 2 years ago. Ever since we are tracking our expenditure budget/actuals in this. She has got some what-if scenarios/versions for investment puposes where she calculates and compares various payment terms. There is one custom dimension in the application which stands for the country we worked and lived in as this is our second country since the application has been built-up.
It's a tiny application with a little PL and CF structure. All classifications are handled in accounts and supporting detail is heavily used. I don't think it would serve you well even if I send you that as the used language is Turkish. However, I'd be happy to help and give real life examples if you are interested.
Cheers,
Alp

Fox news slideshows are not working in Vista Home 64 bit.

All fox news slideshows are not working since firefox 3.6 started. I can't get them to work in Internet explorer either.
== URL of affected sites ==
http://

Error: $.ad is undefined
Source File: http://www.foxnews.com/static/all/js/slideshows-pack.js
Line: 850
// Slideshows - updated: 04/30/2010
// Dependencies: jQuery, jfoxCarousel plugin
(function($){
function SlideShows() {
this._data = {}; // slideshow data
this._info = {}; // current slideshow info
this._relatedMedia = {}; // related media data
this._trackData = false;
this.initialized = false;
this.toolTipId = "carousel-tooltip";
this.defaultTrackFrequency = 1; // tracker trigger
this._preloaderSrc = "/static/all/img/slideshow/slideshow-preloader.gif";
this._timer = { // timers
main: { fadeIn:800 },
carousel: { fadeIn:300 },
overlay: { onLast:10000,fadeIn:300,fadeOut:300 }
this.currentFocus = 1; // current item in focus
this.holderObj = {}; // holder for elements
this.hashObj = {}; // hash location holder
this.imgPreloadObj = {}; // holder for preloaded images
// carousel object controllers
this.carouselControlObj = {};
this.overlayControlObj = {};
this.trigger = { // listeners
main: false,
carousel: false,
overlay: false
this.overlayTimeout = false; // overlay timeout holder
SlideShows.prototype = {
init: function(config) {
for (i in config) { this['_'+i] = config[i]; }
this.main.root = this.carousel.root = this.overlay.root = this;
this.hashObj = this.helper.getHash();
if (typeof $.fn.jfoxCarousel<u>'undefined') {
showToConsole("[init] Error: carousel plugin not found!");
if (this._trackData) { // set tracking data
sTracker.set(this._trackData);
sTracker.track("pageLoad"); // page load tracker
this.preload();
this.setHolders();
this.initialized = true;
preload: function() {
var preloadImg = new Image();
preloadImg.src = this.preloadSrc;
setHolders: function() {
var SH = this;
var slideshowElm = $("#slideshow");
this.holderObj = {
doc: $(document),
body: $("body"),
intro: $("#section-intro"),
main: slideshowElm.find("#main-img"),
mainHolder: slideshowElm.find(".slideshow-placeholder"),
mainControl: slideshowElm.find(".slideshow-controller"),
description: slideshowElm.find(".slideshow-desc"),
relatedMedia: slideshowElm.find(".slideshow-related"),
carousel: slideshowElm.find(".slideshow-feature .slideshow")
this.holderObj.intro.each(function(){
var intro = $(this);
intro.find("h1:first").html(SH._info.title);
intro.find("p:first").html(SH._info.dek);
if (this.holderObj.main.size()>0) {
this.main.properties.minHeight = this.holderObj.mainHolder.innerHeight(); // get set height as "min-height"
this.main.build();
if (this.holderObj.carousel.size()>0) {
this.carousel.build();
$(document).ready(function(){ // wait for page load for the overlay
SH.holderObj.overlay = $("#slideshow-overlay");
var set = (SH.holderObj.overlay.size()>0) ? (typeof $.fn.jfoxCarousel!=='undefined') ? SH.overlay.set() : false : false;
SH.setDocReadyListeners();
this.setListeners();
setListeners: function() {
var SH = this;
var control = this.holderObj.mainControl;
// main image controls
control.find(".prev").click(function(){
SH.main.prev();
return false;
control.find(".next").click(function(){
SH.main.next();
return false;
if (typeof touchEventListener!=="undefined") {
var listenerConfig = {
elm: SH.holderObj.mainHolder,
moveSensitivity: 15,
eventsCallback: {
touchmoveMoveOnce: function(direction,moveProperties,rawEvent) {
// move callback - sensitivity
var directions = direction.join("|");
if (directions.indexOf("left")>-1) {
control.find(".next").trigger("click");
if (directions.indexOf("right")>-1) {
control.find(".prev").trigger("click");
touchEventListener.append(listenerConfig);
setDocReadyListeners: function() {
var SH = this;
// browse slideshow overlay
$(document).ready(function(){
$("#section-intro .additional-slides a").click(function() {
SH.overlay.show();
return false;
SH.holderObj.overlay.find(".close a").click(function(){
SH.overlay.hide();
return false;
replaySlideshow: function() {
var SH = this;
//TODO: build replay
this.overlay.hide(); // hide overlay
this.main.build(this.currentFocus = 1); // reset focus
sTracker.track("replaySlideshow");
// main image holder
SlideShows.prototype.main = {
properties: {},
build: function(slide,origin) {
var SH = this;
var root = this.root;
if (root.trigger.main) { return false; }
root.trigger.main = true;
slide = slide || false;
origin = origin || "main";
var control = root.holderObj.mainControl;
var data = root._data;
var initData = false;
var desc = [];
var helper = root.helper;
if (slide) {
if (slide 0) { desc.push('Source: ' + data.items[slide].source + ''); }
root.holderObj.description.html(desc.join(""));
// load related media
if (root._relatedMedia.items) {
var rmItems = root._relatedMedia.items;
if (rmItems.length>0) {
var rel = [];
rel.push('Related Articles');
for (var x=0; x 0) {
root.currentFocus--;
SH.build(root.currentFocus);
sTracker.track("clickPrevMain"); // tracker
if (!SH.isLast() && root.overlayTimeout) { clearTimeout(root.overlayTimeout); } // clear overlay timeout
isLast: function() {
var root = this.root;
return (root.currentFocus+1 > root._data.items.length) ? true : false;
// carousel
SlideShows.prototype.carousel = {
build: function() {
var SH = this;
var root = this.root;
var carousel = root.holderObj.carousel;
var data = root._data;
var list = [];
for (var x=0;x 0) {
var li = $(".slideshow > ul",carousel).children();
li.each(function(i){
var el = $(this);
var setClass = (i == eventObj.target-1) ? el.addClass("active") : el.removeClass("active");
controlsCallback: function(control) { // callback to set up controls
root.carouselControlObj = control;
carousel.find(".prev").click(function(){ // previous link
control.stopAutoScroll();
control.slide('prev');
sTracker.track("clickPrevCarousel"); // tracker
return false;
carousel.find(".next").click(function(){ // next link
// show overlay on last carousel link
//var lastLink = (!currentEventObj) ? false : (currentEventObj.batch.current+1 > currentEventObj.batch.max) ? $(document).ready(function(){ root.overlay.show(false,true); }) : false;
control.stopAutoScroll();
control.slide('next');
sTracker.track("clickNextCarousel"); // tracker
return false;
carousel.jfoxCarousel(config);
if (typeof touchEventListener!=="undefined") {
var listenerConfig = {
elm: carousel,
moveSensitivity: 15,
eventsCallback: {
touchmoveMoveOnce: function(direction,moveProperties,rawEvent) {
// move callback - sensitivity
var directions = direction.join("|");
if (directions.indexOf("left")>-1) {
carousel.find(".next").click();
if (directions.indexOf("right")>-1) {
carousel.find(".prev").click();
touchEventListener.append(listenerConfig);
// overlay
SlideShows.prototype.overlay = {
set: function() {
var root = this.root;
var overlay = root.holderObj.overlay;
overlay.find(".slideshow-feature").each(function(){
var carousel = $(this);
var allItems = carousel.find(".slideshow ul").children().children();
allItems.each(function(){
var div = $(this);
var link = div.find("a:first").attr("href");
div.hover(function(){
div.css("cursor","pointer");
},function(){
div.css("cursor","");
}).unbind("click").click(function(){
window.location.replace(window.location.hostname + link);
var config = {
auto: { set:false,speed:3000 }, // auto scroll
slide: "horizontal", // horizontal or vertical
scroll: 3, // number of items to scroll per event
show: 3, // items shown
speed: "slow", // scroll speed
rotate: false, // rotate back to star if end
//focus: { item:0,animate:false }, // focus to target item on load
eventCallback: function(eventObj) {
if (eventObj.batch.current</u>1) {
carousel.find(".prev").addClass("inactive");
} else {
carousel.find(".prev").removeClass("inactive");
if (eventObj.batch.current<u>eventObj.batch.max) {
carousel.find(".next").addClass("inactive");
} else {
carousel.find(".next").removeClass("inactive");
controlsCallback: function(control) { // callback to set up controls
root.overlayControlObj = control;
carousel.find(".prev").click(function(){ // previous link
control.stopAutoScroll();
control.slide('prev');
sTracker.track("clickPrevOverlay"); // tracker
return false;
carousel.find(".next").click(function(){ // next link
control.stopAutoScroll();
control.slide('next');
sTracker.track("clickNextOverlay"); // tracker
return false;
carousel.jfoxCarousel(config);
if (typeof touchEventListener!=="undefined") {
var listenerConfig = {
elm: carousel,
moveSensitivity: 15,
eventsCallback: {
touchmoveMoveOnce: function(direction,moveProperties,rawEvent) {
// move callback - sensitivity
var directions = direction.join("|");
if (directions.indexOf("left")>-1) {
carousel.find(".next").click();
if (directions.indexOf("right")>-1) {
carousel.find(".prev").click();
touchEventListener.append(listenerConfig);
show: function(delay,isReplay) {
isReplay = isReplay || false;
delay = delay || false;
var root = this.root;
if (root.trigger.overlay) { return false; } // if already open
var SH = this;
delay = (isNaN(delay)) ? 0 : delay; // delayed show
root.overlayTimeout = setTimeout(function(){
SH.setReplay(isReplay);
if (root.main.isLast()) {
root.holderObj.overlay.fadeIn(root._timer.overlay.fadeIn,function(){ root.trigger.overlay = true; });
sTracker.track("showOverlay"); // tracker
else {
root.holderObj.overlay.fadeIn(function(){ root.trigger.overlay = true; });
},delay);
hide: function(delay) {
delay = delay || false;
var root = this.root;
if (!root.trigger.overlay) { return false; } // if already closed
delay = (isNaN(delay)) ? 0 : delay; // delayed hide
setTimeout(function(){
root.holderObj.overlay.fadeOut(root._timer.overlay.fadeOut,function(){ root.trigger.overlay = false; });
sTracker.track("hideOverlay"); // tracker
},delay);
setReplay: function(isReplay) {
var root = this.root;
var overlay = root.holderObj.overlay;
var firstList = overlay.find(".slideshow-feature .slideshow ul").children().filter(":first");
var divs = firstList.children();
var replayDiv = divs.filter(":first");
var cloneDiv = replayDiv.next();
function configInfo(elm) {
var currentSS = root._data.items;
var info = root._info;
var count = currentSS.length;
var first = currentSS[0];
var slideshowTitle = (info.title.length > 16) ? info.title.substring(0,16) + "..." : info.title;
var slideshowImg = first.media.tm;
var slideshowDate = info.title.date;
function replay() {
root.replaySlideshow();
var items = elm.children();
items.filter("p.photo-count").html(count + " image" + [[count>1) ? "s" : ""]];
items.filter("p.date").html(slideshowDate);
items.filter("p.photo").each(function(){
var item = $(this);
item.find("a").attr({ href: "#", title: slideshowTitle });
item.find("img").attr({ alt: slideshowTitle, src: slideshowImg });
items.filter("h4").each(function(){
var item = $(this);
item.find("a").attr("href","#").html(slideshowTitle);
items.find("a").unbind("click").click(function(){
replay();
return false;
elm.hover(function(){
elm.css("cursor","pointer");
},function(){
elm.css("cursor","");
}).unbind("click").click(function(){
replay();
return false;
if (replayDiv.children().size()</u>0) {
replayDiv.html(cloneDiv.html());
configInfo(replayDiv);
if (isReplay) {
replayDiv.addClass("active").show();
cloneDiv.hide();
} else {
replayDiv.hide();
cloneDiv.show();
SlideShows.prototype.helper = {
toNum: function(item) {
item = (isNaN(item)) ? parseInt(item.replace(/[a-zA-z]/gi,""),10) : item;
return isNaN(item)?0:item;
imgLoad: function(obj,fn) {
var SH = this;
obj.alt = obj.alt || "";
if (obj.preload && !$.browser.opera) { // opera =/= img.onload
if (obj.mainHolder) { obj.mainHolder.css({ background:"url("+obj.preloaderSrc+") no-repeat center" }); }
var img = new Image();
obj.holder.css({ display:"inline", opacity:"0" });
img.onload = function() {
if (obj.outer) {
if (img.height > SH.toNum(obj.outer.minHeight)) { obj.outer.holder.css("height","auto"); }
else { obj.outer.holder.css("height",obj.outer.minHeight); }
obj.holder.attr("src",obj.src).animate({ opacity:"1"},obj.speed,"linear",function(){
if (obj.mainHolder) { obj.mainHolder.css({ backgroundImage:"none" }); }
$(this).attr("alt",obj.alt);
fn();
img.src = obj.src;
} else {
if (obj.mainHolder) { obj.mainHolder.css({ backgroundImage:"none" }); }
obj.holder.css({ display:"inline", opacity:"0" });
obj.holder.attr({
src: obj.src,
alt: obj.alt
}).animate({ opacity:"1"},obj.speed,"linear",function(){ fn(); });
getHash: function() {
var hash = (window.location.hash).substr(1);
if (hash) {
var pairs = hash.split('&');
var valuePair = {};
for (var x=0;x 1 && callback && count%freq<u>0) {
callback(data);
var sTracker = new Trackers(); // private
function showToConsole(str) {
if (typeof window.console</u>'object') { console.log(str); }
var slideShowsPack = window.slideShowsPack = new SlideShows();
})(jQuery);
// Tracking Data Here
var trackData = {
ads: {
buildSlide: {
frequency: 1,
callback: function() {
$(document).ready(function(){
if (typeof $.ad.dc.load!=="undefined") {
$.ad.dc.load();
omni: {
buildSlide: {
frequency: 1,
callback: function(data) {
data = data || false;
if (!data) { return false; }
if (!data.slideNumber) { return false; }
if (typeof $.ad.omni.load!=="undefined") {
$.ad.omni.load({ "slide": data.slideNumber });
var initializeSlideShow = window.initializeSlideshow = function() {
if (typeof slideshowData!=="undefined") {
if (!slideShowsPack.initialized) {
slideShowsPack.init({
data: slideshowData,
info: slideshowInfo,
relatedMedia: relatedsData,
trackData: trackData
} else {
if (typeof window.console==='object') { console.log("[error] No Data found for: slideshowData"); }
This the line highlighted:
if (typeof $.ad.dc.load!=="undefined") {

Can I create a "carousel mode" slideshow file for a customer?

I've shown a customer the bridge review mode and now they want a version to use on their ipad.
They don't have any Adobe products. Ipad so no flash.
Can I use lightroom or similar to create something like review mode, but for use it outside of CC?
THanks

Creating a new file with the extension Filename_responses will not collect the previously distributed form data. If you have the original _responses file, try copying it back to the actual location. However, the information for the distributed forms are still saved in a file named "adhocWorkflow". The information inside this file determines the distributed form data and other workflows.

Href links in slideshow not working

hi,
I have created a non-flash slideshow with WOW Slider which I find to be a very good program and is jquery based.
the actual slideshow runs fine on iPad, my PC - and Android devices,
but:
the six slides have links embedded to other websites, that I have set up to run in a new window, and work fine on PC & Andoid
but on the iPad the outbound links do not work - yet an href link will work on the iPad if called from a static image.
I'm at my wits end with this, and any help would be really appreciated.
thanks,
Kevin UK
nb: the problem page is: http://www.kevbro.co.uk/slides.htm
the wow slider code is:
 
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><a href="http://www.farnworthsom.co.uk/" target="_blank"><img src="data1/images/010.jpg" alt="my latest work" title="my latest work" id="wows1_0"/></a>Driving Instructor training, help with the ADI Standards Check etc</li>
<li><a href="http://www.kevbro.co.uk/chris/index.htm" target="_blank"><img src="data1/images/007.jpg" alt="small business site" title="small business site" id="wows1_1"/></a>Hanging Baskets and Landscaping </li>
<li><a href="http://www.kevbro.co.uk/magellanfoods/index.html" target="_blank"><img src="data1/images/009.jpg" alt="local Food Company" title="local Food Company" id="wows1_2"/></a>a large site with an online ordering system</li>
<li><a href="http://www.carols-pastels.co.uk" target="_blank"><img src="data1/images/001.jpg" alt="Carol's pastels" title="Carol's pastels" id="wows1_3"/></a>the lovely artwork of my talented wife </li>
<li><a href="http://www.carols-pastels.co.uk/books/" target="_blank"><img src="data1/images/002.jpg" alt="Carol's first book" title="Carol's first book" id="wows1_4"/></a>a charming fantasy tale for children. </li>
<li><a href="http://www.kevbro.co.uk/canyon/index.htm" target="_blank"><img src="data1/images/005.jpg" alt="Grand Canyon" title="Grand Canyon" id="wows1_5"/></a>my tribute to 9 brave men in replica boats</li>
</ul>
</div>
<div class="ws_bullets"> <div>
<a href="#" title="my latest work">1</a>
<a href="#" title="small business site">2</a>
<a href="#" title="local Food Company">3</a>
<a href="#" title="Carol's pastels">4</a>
<a href="#" title="Carol's first book">5</a>
<a href="#" title="Grand Canyon">6</a>
</div>
</div>
<span class="wsl"><a href="http://wowslider.com/vu">image carousel</a> by WOWSlider.com v7.3</span>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>


I have tried many of them Frank ...
jquery ones like Wowslider, Virtual lightbox, Juicebox, Nivo slider, and css based one's like CSS slider et al.
and believe me when I say that I have found none of them to be totally reliable across all the varied devices.
whilst what I have resorted to is quite basic, it gets the job done - particularly given my age and what I am hoping to achieve with my site.
as a kind of thank you to Michael and yourself, there are links below to two small pages I did ages ago that may give you a bit of a chuckle.
they are not mentioned on my site, and I'm not sure if they work on iPads.
http://www.kevbro.co.uk/galway/bay.htm
http://www.carols-pastels.co.uk/Nigerianphone/phone.htm
all the best,
Kevin

Thumbnail images not showing up in my Spry slideshow

Hello - Everything seems to be working in my Spry slideshow. However, my thumbnail images are not showing up in Live view or browser. The images are all in the correct folder. Here is what the script looks like:
<ul id="ImageSlideShow" title="Our Products">
        <li><a href="images/ss_penny.jpg" title="All Things Pennies"><img src="images/ss_penny_thumb.jpg" alt="" /></a></li>
        <li><a href="images/ss_rides.jpg" title="Children's Kiosks"><img src="images/ss_rides_thumb.jpg" alt="" /></a></li>
        <li><a href="images/ss_ireality.jpg" title="Simulators"><img src="images/ss_ireality_thumb.jpg" alt="" /></a></li>
        <li><a href="images/ss_carousels.jpg" title="Carousels"><img src="images/ss_carousels_thumb.jpg" alt="" /></a></li>
        <li><a href="images/ss_candy.jpg" title="Candy Kiosks"><img src="images/ss_candy_thumb.jpg" alt="" /></a></li>
     </ul>
      <script type="text/javascript">
Is there something I'm missing?
Thank you

There is nothing wrong with the markup that you have shown, hence the problem will be located somwhere else.
Gramps

Hero slideshow on homepage is un-pinned, yet doesn't move vertically w other content when scrolling

I've created a hero slideshow on the homepage. It is "unpinned", however it doesn't move vertically with the rest of the content when scrolling up/down. It stays in its same spot and the other page content scrolls correctly.

Hi Aish!
Sadly, it is showing as unpinned in my file and I re-published the file and the carousel is still stuck. I've attached a screen capture showing the webpage (left, scrolled) and the muse file (right).
I'm sure this is something I'm doing wrong, do you have any other ideas?
Thanks so much for your help. Do you work for Adobe? If you do, I have other Muse questions I cannot find the answer to online. If you don't work for Adobe and are just a Good Samaritan/Angel, do you know of any manuals/reference books that might help me? I've worked in psd, ai, indd for many years. But attempting the web side of design is killing me, and I'm likely to lose my client if I can't get his site together soon. Thanks again!

Looking for a suitable slideshow for website

Hi I'm looking for a slideshow similar to the one that I have on the frontpage of my website:
http://naturallandscapeandirrigation.com
I'm looking for something that looks similar (simple and has the thumbnails) but I have more control over the settings (autoplay and slide transition times, etc). Are there any that are available? Thanks

MENUS:
jQuery Superfish works in IE10 and Touch Screen devices
http://users.tpg.com.au/j_birch/plugins/superfish/
SLIDESHOW:
jQuery Cycle2 has much improved support now for thumbnails and other cool stuff.
Carousel demo
http://jquery.malsup.com/cycle2/demo/caro-pager.php
Prev/Next demo
http://jquery.malsup.com/cycle2/demo/prevnext.php
Nancy O.

How to create a slideshow in CS5.5

I have Dreamweaver CS5.5 and want to add a slide show to my index page. I use a PC. I see that widgets are no longer available. What are my options? I have a slideshow on the page but it was created by GoLive6 and I am trying to update that page. Thanks for any help with this issue.
Deva Burns

Dreamweaver is pro-level software for people who understand code. If you can't work with code, DW will continue to punish you.
Copy & paste the following code into a new, blank document in code view. SaveAs test.html and preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, Cycle2 Carousel and Fancybox</title>

<script src="http://code.jquery.com/jquery-latest.min.js">
</script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.carousel.min.js"></script>
<style>
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
aside {float:left; width:25%; border-right: 1px solid #666; padding:2%;}
article {float:left; width:75%; padding:2%;}
.slideshow img {
border:4px solid #999;
/* pager */
.cycle-pager {
    text-align: center;
    width: 100%;
    z-index: 500;
    position: relative;
    top: 0;
.cycle-pager span {
    font-family: arial;
    font-size: 75px;
    width: 22px;
    height: 22px;
    display: inline-block;
    color: #ddd;
    cursor: pointer;
.cycle-pager span.cycle-pager-active { color:#09C; }
.cycle-pager > * { cursor: pointer; }
</style>
</head>
<body>
<header>
<h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a> Responsive Carousel Slider with <a href="http://fancyapps.com/fancybox/">Fancybox2</a> Viewer</h1>
</header>
<aside>
<h2>Left Aside</h2>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.
Aenean tristique enim ut ante dignissim.</p>
</aside>
<article>
<h2>Article</h2>

<div class="slideshow"
data-cycle-pause-on-hover="true"
data-cycle-fx="carousel"
data-cycle-timeout="2000"
data-cycle-pager="#pager"
data-cycle-carousel-visible="5"
data-cycle-carousel-fluid="true"
data-cycle-slides="> a"
>

<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/500x350.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 1" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/500x350.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 2" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/500x350.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 3" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/500x350.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 4" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/500x350.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 5" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/500x350.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 6" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/500x350.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 7" /></a>

</div>

<div class="cycle-pager" id="pager">

</div>
</article>

<script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script>

<script>
$(document).ready(function() {
$('.fancybox').fancybox();
</script>
</body>
</html>
Nancy O.

How to embed Adobe Edge HTML5 animations into carousel instead of images.

Is the above question possible? I cannot figure out a way to embed any of my html5 animations (created in Adobe Edge) into a carousel. I have tried creating a nested slider inside of Edge, and I have tried hard coding it, but can not figure out an appropriate solution.

Nancy,
Slideshow is now working great, but I cannot get my animations to exist within the slides themselves. I tried them inside this html but not inside the slideshow, and they work fine, but if I try to add them into the slider, nothing happens and that particular slide is simply blank. I have only tried the first one but it is not working. Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cycle2 with Carousel Slider</title>


<script src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.carousel.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="Infographic-1_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-3350547 { visibility:hidden; }
    </style>

<style>
.slideshow {
    width: 915px;
          height: 440px;
    margin: 0 auto;
    border: 1px solid silver;
.slideshow div {
    width: 915px;
          height: 440px;
/* slideshow pager */
.cycle-pager {
    text-align: center;
    width: 100%;
    z-index: 500;
    position: relative;
    top: 0;
.cycle-pager span {
    font-family: arial;
    font-size: 75px;
    width: 22px;
    height: 22px;
    display: inline-block;
    color: #ddd;
    cursor: pointer;
.cycle-pager span.cycle-pager-active { color: #FF0004; }
.cycle-pager > * { cursor: pointer; }
/**End Cycle2 Carousel Styles**/
</style>
</head>
<body>
<header>
<h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a> with <a href="http://jquery.malsup.com/cycle2/demo/carousel.php">Responsive Carousel </a>Slider</h1>
</header>

<div class="slideshow"
data-cycle-pause-on-hover="true"
data-cycle-fx="carousel"
data-cycle-timeout="0"
data-cycle-pager="#pager"
data-cycle-carousel-visible="1"
data-cycle-carousel-fluid="true"
data-cycle-slides="div"
>

<div id="Stage" class="EDGE-3350547">
</div>
<div>
<p>Slide two content here...</p>
</div>
<div>
<p>Slide three content here...</p>
</div>
<div>
<p>Slide four content here...</p>
</div>

</div>

<div class="cycle-pager" id="pager">

</div>

<script>$.fn.cycle.defaults.autoSelector = '.slideshow';
</script>
</body>
</html>

Carousel not honoring image size and inlineFrame target issue

I have questions related to slideshow or carousel in the following:
•     “af:inlineFrame”: in the html, it has a “”, looks like it doesn’t work in ADF. Do you have any work around or is this a limitation?
•     “af:carousel”: this component doesn’t honor “<af:image>” dimension and it truncates image into a small square shape. I tried everything I can think of. Do you know if this is a limitation? If so, is there a good solution for this?
For all the cases above, I want to click on the image link and the system redirects to me to a page associated with the image. Usecase is announcements that's animated in a slideshow or carousel.
If you have any suggestions I appreciate the help.
Thanks,
Dara

Dara,
Can you try surrounding af:image with af:goLink / af:commandLink and set the inline style of it to inherit?
Something like
                                <af:carousel id="c1" var="item">
                                    <f:facet name="nodeStamp">
                                        <af:carouselItem id="ci1" inlineStyle="background-color:inherit;"
                                                         styleClass="AFStretchWidth">
                                            <af:commandLink id="l1">
                                                <af:image id="i2" inlineStyle="height:inherit; width:inherit;"
                                                          styleClass="AFStretchWidth"/>
                                            </af:commandLink>
                                        </af:carouselItem>
                                    </f:facet>
                                </af:carousel>-Arun

Converting jQuery Cycle slideshow to jQuery Cycle2

I am trying to convert an existing jQuery Cycle slideshow with page anchors to jQuery Cycle2. I keep getting caught up on converting the Javascript that currently resides in the HTML page:
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:     'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
// return selector string for existing anchor
           return '#nav li:eq(' + idx + ') a';
</script>
Any ideas?

Cycle2 is completely different from the older Cycle plugin. C2 uses the latest jQuery core library and HTML5 data attributes to invoke the plugin's features. The function codes you have there won't work. I would recommend starting over with a plain, blank HTML5 document. The code below contains Cycle2 Carousel with Fancybox.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5, Cycle2 Carousel with Fancybox Viewer</title>


<script src="http://code.jquery.com/jquery-latest.min.js">
</script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.carousel.min.js"></script>
<style>
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
    box-sizing: border-box;
aside {
    float: left;
    width: 25%;
    border-right: 1px solid #666;
    padding: 2%;
section {
    float: left;
    width: 75%;
    padding: 2%;
.slideshow img { border: 4px solid #999; }
/* slideshow pager */
.cycle-pager {
    text-align: center;
    width: 100%;
    z-index: 500;
    position: relative;
    top: 0;
.cycle-pager span {
    font-family: arial;
    font-size: 75px;
    width: 22px;
    height: 22px;
    display: inline-block;
    color: #ddd;
    cursor: pointer;
.cycle-pager span.cycle-pager-active { color: #09C; }
.cycle-pager > * { cursor: pointer; }
</style>
</head>
<body>
<header> <h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a> Responsive Carousel Slider with <a href="http://fancyapps.com/fancybox/">Fancybox2</a> Viewer</h1>
</header>
<aside>
<h2>Left Aside</h2>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.
Aenean tristique enim ut ante dignissim.</p>
</aside>
<section>
<h2>Section</h2>

<div class="slideshow"
data-cycle-pause-on-hover="true"
data-cycle-fx="carousel"
data-cycle-timeout="2000"
data-cycle-pager="#pager"
data-cycle-carousel-visible="5"
data-cycle-carousel-fluid="true"
data-cycle-slides="> a"
>

<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 1" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 2" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 3" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 4" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 5" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 6" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 7" /></a>

</div>

<div class="cycle-pager" id="pager">

</div>
</section>

<script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script>

<script>
        $(document).ready(function() {
            $('.fancybox').fancybox();
    </script>
</body>
</html>
Nancy O.

Load content in another viewing space... Button..Viewer..Video..Panorama.. Carousel..Dreamw..Flash..

Dear Reader,
I made a site with a custom player to show video. I made my own buttons in Flash. On type showed while hovering over the played video and are used for controlling play/pause - button for homepage and two buttons for the next or previous gallery. The other type are underneath the playing video and let you pick thumbnails whose links were shown in the player window.
First I wanted to use a carousel (Lee Brimelow) for the second type of buttons, but I couldn't integrate these with the rest of the player code (my flash-code knowledge is rather limited).
Later on I wanted to show a panorama wich I only got to work with the Away3D-method. In this case I couldn't integrate it with any other code, so I used Dreamweaver to let a viewer choose thumbnails. One can navigate in the viewer window by dragging in the window, so I left out the other navigation buttons within the player window, mentionned earlier.
Now I am thinking of this concept:
- Button(s) for Homepage and (Next/Previous) gallery;
- Viewer window, with
- timeslider and Play/Pause button integrated in case of a video or slideshow;
- dragging in case of a Panoramic view;
- Carousel for picking a subject that will be shown in the Viewer window.
Question:
- Can I combine these 3 types of the concept as Flash-movies and buttons/carousel in Dreamweaver and still have the carousel control the viewer window?
or:
- Should I do all in Flash and make a personal Flashplayer (like I did before) and study more Flash?
What tutorials could I take a look at? (For instance I found a lot of sites about how to make a carousel. I don't know how to make it control a viewer window (to make it load content in another window or space.)
Greatings,
Richafrost.

Hi,
Just wanted to clarify a few things to try and eliminate what could be causing the problem.
1. You are using rtmps protocol. Do you have SSL certificate configured and port 443 enabled?
2. When you tried playback via the hosted OSMF player was it via rtmps?
3. The standard way the request url is protocol://server-domain-or-IP/fms-app-name/[fms-app-instance-name/][codec-prefix:]file-pa th[filename-extension]. Could you try with that?
I tried to reproduce your issue with simple rtmp prtocol and here are my observations/suggestions :
1.When I first entered the source url I got the error you mentioned : "The video player is in the connection error state." However, when I publish the same .fla again it works fine.
2. When you are placing the on a computer on the same network and running the html in the browser, it might not have permission to access the network. You will generally get a pop-up saying "Flash Player has stopped a potentially unsafe option". In any case, in your Flash player settings manager you can go to the Advanced tab and add the location of the folder containing the swf as a Trusted location and then try to reload the page again. I get the "status bar spin" when the folder did not have permissions.
3. Also, when you try playback via Share Point can you go back to FMS and check if a connection request has actually come to the server. You can check under the access logs in root_install/logs or the application logs under root_install/logs/_defaultVHost_/vod/
Please let me know if this helps.
Thanks,
Apurva

Lightbox in slideshow widget scrolling with page

Hi,
if i have page that scrolls and being in lightbox mode, scrollbar in browser doesn't dissapear and causing scroll of lightbox image thru all the page when moving mouse wheel or keyboard - it shouldn't scroll! It didn't happen with muse 2.
Please fix it or post solution.
Look at this - there is no scroll bar in lightbox mode and you can't scroll image up or down - despite main site have a scroll bar:
http://tv.adobe.com/watch/learn-muse/adobe-muse-creating-a-lightbox-slideshow/?t=148.764

i ask the same !A carousel thumbnails widget or place a html !
And i think is possible because i found this http://muse.adobe.com/exchange-library/lances-sample-widgets and this support the base for the scrolling effect,I mean here that you can find marquee (text scrolling ) and a sliding image also.Its a start.I hope a development make a widget for sliding thumbnails

Adding a slideshow using apDivs - Will not center / clashes with images.

Hey guys,
I'll be as quick and to the point as possible. I'm new to Dreamweaver and am having some problems in my attempts to create a simple portfolio website.
I'm trying to add in a basic image slide-show while making use of apDivs. I've had a look online and found some fantastic JQuery slide-shows, and I ended up adapting this one for use on my website;
http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery
I have images as the base of my website and I wanted to add the slide-show on top of them (and the same goes for a couple of embeded YouTube videos too.) I added in an apDiv and placed the code for the slide-show inside it. This created a layer that goes on top of the image, and I am able to put the code for the slide-show inside it with no problems (providing the position of the apDiv is set to absolute.)
#apDiv1 {
    position:absolute;
    top:419px;
    left:400px;
    width:555px;
    height:480px;
    z-index:1;
The problem I'm having is aligning the cursed thing. Obviously, setting the apDiv's positioning to absolute is a bad idea, as while it looked fine in one resolution, it doesn't in another. I've tried changing the position of the apDiv to relative, and then adding in some changes to my code;
#apDiv1 {
    position:relative;
    width:555px;
    height:480px;
    margin-left: auto;
     margin-right:auto;
    z-index:1;
This centers my slideshow (which is wonderful), however it is no longer layered on-top of the image (since this seems to only work when the position is set to absolute.) Instead, the slideshow appears underneath the image rather than on top.
Is there any possible way I can keep the apDiv (which contains the slide-show) centered whilst remaining on-top of the image? Like I say, it'll layer on top of it fine when set to absolute, but wont center. When set to relative, it'll center but not layer on top. It's one or the other and I'm pulling my hair out over it at the moment.
If anyone can give any help at all, please please let me know. I've included a notepad document including the whole of my code for the page (including my goofy comments) at the address below if it helps in any way;
http://www.box.net/shared/5nufqc78jbg0mfkb00n5

Of course mate. Like I mentioned before, I still don't have any of my web-pages online (since I've been trying to get it all fixed and working first.) I'm hoping to host with 1-2-3 Reg, so I'm waiting for pay day before I buy a years worth from them.
The folder at the link below though contains the HTML document for the page along with all its images and CSS scripts;
http://www.box.net/shared/lgqltz3i90ya8k3nyui9
Despite them being in the folder, if you'd rather, I'll paste the main bodies HTML code below (and also the accoumpanying CSS document. If there's any problems, please let me know. Thanks again!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Info || Lee Sparkes BSc Games Design Graduate</title>
<link href="styles/website_main.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>

<script>
$(document).ready(function() {
    //rotation speed and timer
    var speed = 5000;
    var run = setInterval('rotate()', speed);
    //grab the width and calculate left value
    var item_width = $('#slides li').outerWidth();
    var left_value = item_width * (-1);
    //move the last item before first item, just in case user click prev button
    $('#slides li:first').before($('#slides li:last'));
    //set the default item to the correct position
    $('#slides ul').css({'left' : left_value});
    //if user clicked on prev button
    $('#prev').click(function() {
        //get the right position
        var left_indent = parseInt($('#slides ul').css('left')) + item_width;
        //slide the item
        $('#slides ul:not(:animated)').animate({'left' : left_indent}, 200,function(){
            //move the last item and put it as first item
            $('#slides li:first').before($('#slides li:last'));
            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
        //cancel the link behavior
        return false;
    //if user clicked on next button
    $('#next').click(function() {
        //get the right position
        var left_indent = parseInt($('#slides ul').css('left')) - item_width;
        //slide the item
        $('#slides ul:not(:animated)').animate({'left' : left_indent}, 200, function () {
            //move the first item and put it as last item
            $('#slides li:last').after($('#slides li:first'));
            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
        //cancel the link behavior
        return false;
    //if mouse hover, pause the auto rotation, otherwise rotate it
    $('#slides').hover(
        function() {
            clearInterval(run);
        function() {
            run = setInterval('rotate()', speed);
//a simple function to click next link
//a timer will call this function, and the rotation will begin.
function rotate() {
    $('#next').click();
</script>

<link href="styles/website_menu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
    background-color: #003d6a;
#carousel {
    width:555px;
    height:480px;
    margin:0 auto;
#slides {
    overflow:hidden;
    position:relative;
    width:550px;
    height:440px;
    border:1px solid #ccc;
#slides ul {
    position:relative;
    left:0;
    top:0;
    list-style:none;
    margin:0;
    padding:0;
    width:2200px;
#slides li {
    width:550px;
    height:440px;
    float:left;
#slides li img {
    padding:0px;
#buttons {
    padding:0 0 5px 0;
    float:right;
#buttons a {
    display:block;
    width:31px;
    height:32px;
    text-indent:-999em;
    float:left;
    outline:0;
a#prev {
    background:url(arrow.gif) 0 -31px no-repeat;
a#prev:hover {
    background:url(arrow.gif) 0 0 no-repeat;
a#next {
    background:url(arrow.gif) -32px -31px no-repeat;
a#next:hover {
    background:url(arrow.gif) -32px 0 no-repeat;
.clear {clear:both}
#apDiv1 {
    position:relative;
    width:555px;
    height:480px;
    margin-left: auto;
    margin-right:auto;
    z-index:100;
</style>
</head>

<body>
<div id="container">
<div id="banner"><img src="images/banner.gif" width="1163" height="109" alt="Lee Sparkes || BSc Games Design Graduate" />
    <ul id="website_menu" class="MenuBarHorizontal">
      <li><a href="index.html">Home</a>      </li>
      <li><a href="info.html">Info</a></li>
      <li><a href="portfolio.html">Portfolio</a>      </li>
      <li><a href="downloads.html">Downloads</a></li>
    </ul>
</div>

<img src="images/info01.jpg" alt="" width="1163" height="270" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="778,18,877,115" href="http://uk.linkedin.com/in/leesparkes" alt="Linkedin Profile" />
<area shape="rect" coords="903,15,998,113" href="http://checkeredknight.tumblr.com/" alt="Tumblr Profile" />
<area shape="rect" coords="1022,16,1121,113" href="http://www.youtube.com/lightning89" alt="YouTube Profile" />
</map>
<img src="images/info02.jpg" alt="" width="1163" height="522" border="0"/>

<div id="apDiv1"><div id="carousel">
    <div id="buttons">
        <a href="#" id="prev">prev</a>
        <a href="#" id="next">next</a>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div id="slides">
        <ul>
            <li><img src="infoslide1.jpg" width="550" height="440" alt="Slide 1"/></li>
            <li><img src="infoslide2.jpg" width="550" height="440" alt="Slide 2"/></li>
            <li><img src="infoslide3.jpg" width="550" height="440" alt="Slide 3"/></li>
            <li><img src="infoslide4.jpg" width="550" height="440" alt="Slide 4"/></li>
        </ul>
        <div class="clear"></div>
    </div>
</div></div>

<img src="images/info03.jpg" alt="" width="1163" height="416" /><img src="images/info04.jpg" alt="" width="1163" height="380" border="0" usemap="#Map4" />
<map name="Map4" id="Map4">
<area shape="rect" coords="374,122,561,149" href="mailto:[email protected]" alt="" />
<area shape="rect" coords="374,152,572,181" href="mailto:[email protected]" alt="" />
</map>
<img src="images/info05.jpg" alt="" width="1163" height="282" /><img src="images/info06.jpg" alt="" width="1163" height="418" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
<area shape="rect" coords="736,202,940,228" href="http://www.iplay.com/" alt="iplay Website" />
</map>
<img src="images/info07.jpg" alt="" width="1163" height="362" border="0" usemap="#Map3" />
<map name="Map3" id="Map3">
<area shape="rect" coords="234,12,548,45" href="http://dyingfordaylight.com/" alt="Dying for Daylight Website" />
<area shape="rect" coords="733,272,941,304" href="http://www.iplay.com/" alt="iplay Website" />
</map>
<img src="images/info08.jpg" alt="" width="1163" height="234" /><img src="images/info09.jpg" alt="" width="1163" height="56" /></div>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("website_menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
#container {
    width: 1163px;
    background: #001524;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}#banner {
    position: relative;
#website_menu {
    position: absolute;
    top: 65px;
    right: 0px;
#main_image {
    background-color: #001524;

Carousel slideshow?

Similar Messages

Maybe you are looking for