lingo5 Posted May 6, 2012 Share Posted May 6, 2012 Hi, I have this PHP script tha displays all images in a given directory: <?php //path to directory to scan. i have included a wildcard for a subdirectory $directory = "banners/"; //get all image files with a .jpg extension. $images = glob("" . $directory . "*.jpg"); $imgs = ''; // create array foreach($images as $image){ $imgs[] = "$image"; } //shuffle array shuffle($imgs); //select first 20 images in randomized array $imgs = array_slice($imgs, 0, 20); //display images foreach ($imgs as $img) { echo "<img src='$img' /> "; } ?> This works fine. My problem is when I try to use the $img var in the following Jquery banner rotator: <body> <div id="wrapper"> <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a> <div class="slider-wrapper theme-default"> <div class="ribbon"></div> <div id="slider" class="nivoSlider"> <img src="<?php echo $img />" alt="" /> // this is where my images should go </div> <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div> </div> </div> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> </body> The Jquery script is premade but quite simple. Please can anyone tell me how I could do this? Thanks Quote Link to comment Share on other sites More sharing options...
smerny Posted May 6, 2012 Share Posted May 6, 2012 in the second example, where are you setting the $img variable? can we see that? just noticed this... <img src="<?php echo $img />" alt="" /> // this is where my images should go should probably be <img src="<?php echo $img; ?>" alt="" /> // this is where my images should go Quote Link to comment Share on other sites More sharing options...
lingo5 Posted May 6, 2012 Author Share Posted May 6, 2012 Hi smerny, is this what you mean? <img src="<?php echo $imgs />" alt="" /> // this is where my images should go Quote Link to comment Share on other sites More sharing options...
smerny Posted May 6, 2012 Share Posted May 6, 2012 hey, i caught something after i posted so check my edit, you were not ending the php. Quote Link to comment Share on other sites More sharing options...
lingo5 Posted May 6, 2012 Author Share Posted May 6, 2012 ooops ...thanks smerny, that fixed part of the problem. The thing is that my banner rotator is now rotating just the first image.....I want it to rotate all images in the "banners" dir. Quote Link to comment Share on other sites More sharing options...
smerny Posted May 6, 2012 Share Posted May 6, 2012 i don't see where you are trying to loop through your images in the second example, i don't even see where $img is getting set Quote Link to comment Share on other sites More sharing options...
lingo5 Posted May 6, 2012 Author Share Posted May 6, 2012 Thanks a lot for your help smerny...but I was just being blind. I forgot to loop through the images in the banners dir....duh This is how I got it to work: <?php //path to directory to scan. i have included a wildcard for a subdirectory $directory = "banners/"; //get all image files with a .jpg extension. $images = glob("" . $directory . "*.jpg"); $imgs = ''; // create array foreach($images as $image){ $imgs[] = "$image"; } //shuffle array shuffle($imgs); //select first 20 images in randomized array $imgs = array_slice($imgs, 0, 20); ?> <!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> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" /> <link rel="stylesheet" href="themes/pascal/pascal.css" type="text/css" media="screen" /> <link rel="stylesheet" href="themes/orman/orman.css" type="text/css" media="screen" /> <link rel="stylesheet" href="rotator_css/nivo-slider.css" type="text/css" media="screen" /> <link rel="stylesheet" href="rotator_css/style.css" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a> <div class="slider-wrapper theme-default"> <div class="ribbon"></div> <div id="slider" class="nivoSlider"> <?php foreach ($imgs as $img) { echo "<img src='$img' /> "; } ?> </div> <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div> </div> </div> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> </body> </html> Quote Link to comment Share on other sites More sharing options...
lingo5 Posted May 6, 2012 Author Share Posted May 6, 2012 THANKS!!! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.