Jump to content

aligning images of different sizes in a div for a jquery slide show


powpow

Recommended Posts

hey Freaks!

 

been trying to implement a jquery slide show with multiple images with differing sizes and orientations (square vs rectangle).  The issue I have been have is to make the images sit at the bottom of the div and be centered. 

 

I am using the following jquery

 

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#slideshow').cycle({
        fx: 'fade',
pause: 1,
speed: 2500
    	});
  $('#slideshow1').cycle({
        fx: 'fade',
    	speed:5000,
random: 1,
pause: 1
});

});

 

I actually have two slide shows one for images and one for quotes.  My goal is to have the pictures sit directly on top of the quotes.

 

Here is my html.

 

<div id="main-content">
  <div id="demo">
    <div id="slideshow">
      <div><img /> </div>  /* times number of pictures in the slide show*/
     </div> <!-- slideshow -->
        
     <div id="slideshow1">
       <div class="quote"><p></p></div> /* times number quotes in the slide show*/
     </div><!-- slideshow1 -->
   </div><!-- demo -->
</div><!-- maincontent --> 

 

 

Here is my css:

 

#main-content {
height:670px;		
padding-left: 5px;
padding-top: 5px;
border-top:solid;
overflow-x: hidden;
overflow-y: scroll;
}

#demo{
border: dotted 5px red;
}

#slideshow { 
margin:auto; 
width: auto; 
height: auto;
border: solid 12px red;
}

#slideshow div {
width: auto; 
height: auto;  
display: table-row; 
vertical-align: bottom;
border: solid 5px blue; 
}

#slideshow div img { 
padding: 15px; 
border: 1px solid #ccc; 
background-color: #eee; 
}

#slideshow1{
margin: auto;
width: 465px; 
height: auto;
text-align:center;
background: rgba(204,204,205,.6);
display:block;
}

 

I have tried different options like display:table route but have had little success.  I appreciate every one's insight! If you need any more information just ask...

 

Thank you and happy new year!

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.