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!

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.