How do you add a sidebar on top of a slideshow

-

i ideally add sidebar can dragged away , sit on top of slideshow have created. similar sliding drawer.

 

i haven't slightest idea how sit on top of slideshow, possible that? or have make side bar permently there?

 

also while @ if knows how make there no white gap in between images of slideshow thatd fantastic!

 

 

 

thanks help! attach images , code can see at.

 

kelsey

 

ps- in image photo slideshow - along gray box. want sidebar slide in , out.

 

screen shot 2013-05-03 @ 6.34.47 pm.png

code

<head>

 

 

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>explorer group</title>

 

 

 

 

<style type="text/css">

#container {

          width: 1024px;

          height: 768px;

          background:

          margin: 0 auto;

          border: ;

          text-align: left;

 

 

}

 

 

 

 

 

 

#slider {

          background-image:none

          width: 1024px;

          height: 768px;

          overflow:hidden;

          margin-top:30px auto;

 

 

}

 

 

#slider img {

          background: fixed;

          width: 1024px;

          height: 768px;

          display: none;

 

 

}

 

 

#sidebar {

          width: 439px;

          height: 768px;

          display: table-column;

 

}

 

 

 

</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<script type="text/javascript">

 

 

function slider(){

          $("#slider #1").show("fade", 500);

          $("#slider #1") .delay(5500).hide("slide", {direction: "left"}, 500);

 

          var sc=$("#slider img").size();

          var count= 2;

 

 

 

 

          setinterval(function (){

          $("#slider #"+count).show("slide", {direction: "right"}, 500);

          $("#slider #"+count).delay(5500).hide("slide", {direction: "left"}, 500);

 

 

          if(count==sc){

          count=1;

 

          }else{

                    count= count+1

 

          }

 

          },6500);

 

          

}

 

 

</script>

 

 

 

 

</head>

<body onload="slider();">

<!--container div tag-->

<div id="container">

   

    <div id="slider">

    <img id="1" src="sliders/images/auto.jpg" border=0/>

    <img id="2" src="sliders/images/mall.jpg" border=0/>

    <img id="3" src="sliders/images/bank v2.jpg" border=0/>

    <img id="4" src="sliders/images/ipad.jpg" border=0/>

      

   

    </div>

   

</body>

it's better keep sidebars left or right side of slideshows.  when start layering elements on top of slideshows, fading in/out of images can adversely effect visibility of sidebar content.   it's best avoid problem entirely not layering.

 

to offer suggestions slideshow, need see url.

 

 

nancy o.



More discussions in Dreamweaver support forum


adobe

Comments

Post a Comment