CODEWITHSUNDEEP
phpjquery
Matt Winer
Matt Winer

Reputation: 535

Rotate images from auto rotate using jquery cycle for Photo Slideshow

I'm using some slideshow code I found. I got it up an running and shows the pictures great. The TV I'm running the slideshow on is turned 90 degrees. But it's only physically turned. It's not turned in the OS. So I need to rotate all the images 90 degrees

I can't seem to get the code right to flip it. I've tried PHP but my limited knowledge is preventing me from getting it right.

Here's the code I'm using

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Slideshow</title><!-- -->

<script src="scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.lite.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('#myslides').cycle({
        fit: 1, pause: 1, timeout: 4000
    });
});
</script>
<link rel="stylesheet" href="styles/dynamicslides.css" type="text/css" media="screen" />
</head>
<body>
<?php
$directory = 'images/slideshow';    
try {       
    // Styling for images   
    echo '<div id="myslides">'; 
    foreach ( new DirectoryIterator($directory) as $item ) {            
        if ($item->isFile()) {
            $path = $directory . '/' . $item;

            echo '<img src="' . $path . '"/>';  
        }
    }   
    echo '</div>';
}   
catch(Exception $e) {
    echo 'No images found for this slideshow.<br />';   
}
?>
</body>
</html>

Upvotes: 0

Views: 482

Answers (1)

Jacky Cheng
Jacky Cheng

Reputation: 1556

there are mutiple kind of "rotation", but I think the one you want is simply "dislpay the image at 90 degrees".

In that case, I'd suggest CSS over PHP. Make sure the rotation doesn't truncate any of you image.

#90Image
{
    /* Firefox */
    -moz-transform:rotate(90deg);
    /* Safari and Chrome */
    -webkit-transform:rotate(90deg);
    /* Opera */
    -o-transform:rotate(90deg);
    /* IE9 */
    -ms-transform:rotate(90deg);
}

and modify you code to:

echo '<img id="90Image" src="' . $path . '"/>';

Upvotes: 1

Related Questions