Jquery Photo Cycle - Ensure Remote Image URLs Center Correctly

Question

I'm using the jquery photo cycle tool to display a list of company logo's on my website. I randomly select 5 remote image urls from the DB to be displayed on each page, and center the element on the page.

<div align="center">
Featured Companies
<div class="logos" align="center"> 
<?php 
foreach($this->logos as $logo) :
echo "<a title=\"".$logo->name."\" href=\"./company/listrunners/company/".$logo->id."\"><img src=\"".$logo->image."\"/></a>\n";
endforeach;
?>
</div> 
</div>

The css for the logo div

.logo {  
    padding: 0;  
    margin:  0;  
} 

.logo img {  
    position: inherit;
    padding: 15px;  
    border: 1px solid #ccc;  
    background-color: #eee;
    top: 0;
    left: 0;
    max-width: 200px; 
}

The problem is since the company logo's are difference sizes, the alignment of the photo cycle widget can change depending on the random selection, appear either in the center or else on the left. Without know the size of the images that will be displayed, is there a way to ensure all logo's are shown in the center?

Answer 1

I'm not entirely sure how you would go around doing that but I'm sure it's possible. You won't be able to do it using CSS as jquery applied the styles in-line so that would override your stylesheet

I can see the plug-in is applying {position: 'absolute', top:0, left:0} to the image elements.

Malsup also supplies the source code in the download for the plug-in and it's there he's setting the postion of the elements;

$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
     var z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
     $(this).css('z-index', z)
    });

But that's apllied to all elements so I'm still not entirely sure how you would go around solving your problem of changing the position for each image.

There are before/after callback functions which you could possibly use to override the postioning of the elements but maybe a better option is the calculateTimeout callback function which allows you to set the timeout for individual slides/images.

function calculateTimeout(currElement, nextElement, opts, isForward) {}

That's not the important part for you. It also supplies you with the current/next element and it's there you could possibly target the positioning of the element.

That wasn't really an answer to your question but hopefully some ideas to help you.

Answer 2

I got this link from malsup on centering images

I removed the align='center' tag on the div

<div class="slideshow"> 
<?php 
foreach($this->logos as $logo) :
echo "<div class=\"slide\"><a title=\"".$logo->name."\" href=\"./company/listrunners/company/".$logo->id."\"><img src=\"".$logo->image."\"/></a></div>\n";
endforeach;
?>
</div> 

and then updated my CSS to be

.slideshow { margin: 20px auto; padding: 0; }
.slide { margin: 0; padding: 0 }
.slideshow, .slide { height: 332px; width: 832px; }
.slide img { padding: 10px; border: 1px solid #ccc; background-color: #eee; margin: auto; display: block }