Cropping images in Step Carousel Viewer

[Paramasivan]

Script http://www.dynamicdrive.com/dynamici...epcarousel.htm

I am using different sizes of images that will be uploaded by the users. Is it possible to crop the images automatically to 187px x 187px without using a cropping plugin?

Thank you,

[Beverleyh]

To get the neatest and most consistent result, resizing images (to generate thumbnails) on the server-side, with a combination of PHP and ImageMagick, would be a good solution. If you want to investigate further, have a look at this tutorial: https://coffeeshopped.com/2009/01/cr...nd-imagemagick

Alternatively, if the uploaded images will be reasonably small, and of a similar size and proportion, you might be able to get away with just using CSS. You could, for example, remove the img element from inside each step carousel <div class="panel"> and use a combination of background:url(path/to/img.jpg); and background-size:cover; to fit/auto-resize background images on the actual <div class="panel">. More info on background-size http://www.sitepoint.com/css3-background-size-property/

Bear in mind that background-size:cover; wont work in IE8 and under. Although, maybe a default image in an IE8 stylesheet could be an option (just some pre-sized filler in lieu of the carousel for old IE browsers)

[Paramasivan]

Thank you for your reply. I have used https://code.google.com/p/resize-crop/

[Paramasivan]

I am using multiple step carousels. The second one is used inside jquery tabs. The navigation arrows are not appearing in local copy but when uploaded to the server they are appearing. Please see the tab Photos (26,222) tab at http://www.emailforusa.com/travel/

The arrows appearing on other tab contents also. While inspecting the element are are just above the closing < /body > tags.

Also sometimes the arrows are not appearing. While refreshing the page they are appearing.