powpow Posted December 31, 2011 Share Posted December 31, 2011 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 https://forums.phpfreaks.com/topic/254135-aligning-images-of-different-sizes-in-a-div-for-a-jquery-slide-show/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.