CODEWITHSUNDEEP
phpjquery
gtroop
gtroop

Reputation: 293

displaying image from directory using dropdown using jquery

i have the code below that will change the image based on a dropdown

the image in db is stored example as mypicture.jpg and all thumbshot image is located at /images/thumbshots/

right now the image selected is displayed when we load the page but when changing the drop down the picture is not showing i got mydomain.com/mypicture.jpg instead of mydomain.com/images/thumbshots/mypicture.jpg

my code so far

 echo "<label for='image'>  Select Image File :</label>
 <select name='image' id='selectsrc' class='form-control'>
   <option value=''>Select Image </option>";
   foreach(glob(dirname(__FILE__) . '/images/thumbshots/*.{jpg,png,gif}', GLOB_BRACE) as $image_db){
       $image_db = basename($image_db);

          if($image == $image_db) {
 echo "<option value='" . $image_db . "' selected>".$image_db."</option>";
}
else
{
   echo "<option value='" . $image_db . "'>".$image_db."</option>";
}

   }

 echo "</select></div>";


 if ($image!='')
 {
 echo "<img src='images/thumbshots/$image' id='changesrc'>";
 }
 else
 {
 echo "<img src='".MY_URL."/images/blank.gif' id='changesrc'>";
 }
 ?>
<script type="text/javascript">
  var jQuery_1_9_1 =$.noConflict(true);
  </script> 

 <script>
   jQuery_1_9_1(document).ready(function() {
     jQuery_1_9_1('#selectsrc').change(function(){
         jQuery_1_9_1("#changesrc").attr('src',jQuery_1_9_1(this).val());
     });
   });
 </script>

i think i need to change this code but im currently stuck with it..any input is much appreciated..thank you

 <script>
   jQuery_1_9_1(document).ready(function() {
     jQuery_1_9_1('#selectsrc').change(function(){
         jQuery_1_9_1("#changesrc").attr('src',jQuery_1_9_1(this).val());
     });
   });
 </script>

Upvotes: 0

Views: 105

Answers (1)

Omi
Omi

Reputation: 4007

As you are getting only image name you need to prefix your directory before name. And you dont need such a big selector jQuery_1_9_1 you can use simple one with single letter.

OR

Just add full path in option value then dont need any prefix your code will work in that case.

 <script>
     jQuery_1_9_1(document).ready(function() {
         jQuery_1_9_1('#selectsrc').change(function(){
                 var img_path = 'images/thumbshots/' + jQuery_1_9_1(this).val();
                 jQuery_1_9_1("#changesrc").attr('src', img_path);
             });
         });
</script>

Upvotes: 2

Related Questions