CODEWITHSUNDEEP
php
user1200640
user1200640

Reputation: 1087

change image src in php?

I beginner in php and I am making small project which will help me learn more php. any way on webserver I have uploaded pictures which in this format:

1.jpg
2.jpg
3.jpg
4.jpg
5.jpg

and so on....

in the body of my page I have:

<?php
$imageNumber = 1;
?>
<img src="'$imageNumber'.'.jpg'">

why is this code is not working ? also I want to create a function that every time the user click a button the $imageNumber get incremented by 1

Upvotes: 3

Views: 39632

Answers (10)

Александр Сонич
Александр Сонич

Reputation: 125

First you need Array on images, than calculate this array, for each keyitem of array create template your ".jpg alt="echo url " />

`

$images= array("1", "2", "3", "4", "5", "6");

shuffle($images);
foreach ($images as $img) {
    echo "<img src='imagesDirectory/$img.jpg'> <br>";
}

`

Upvotes: 0

Harry Forbess
Harry Forbess

Reputation: 2134

    <img src="<?PHP echo $imageNumber ?>.jpg">

Upvotes: 0

Kato
Kato

Reputation: 40582

You can only use PHP variables inside PHP tags.

<?php
   $imageNumber = 1;
   echo '<img src="'.$imageNumber.'.jpg'">';
?>

Or

<?php
   $imageNumber = 1;
?>
<img src="<?php echo $imageNumber ?>.jpg">

For the function, use javascript. jQuery would be simplest, but I've included a raw version too:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
     <title></title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

  </head>
  <body>

  <img id="the_image" src="1.jpg">

  <input type="button" id="the_button" value="change" />

  <script type="text/javascript">
     var maxNumImages = 5;
     // for the function, use javascript. jQuery would be simplest:
     jQuery(function($) {

        $('#the_button').click(function() {
           var num = ($('#the_image').attr('src').match(/(\d+).jpg$/)||[false])[1];
           if( num !== false ) {
              if( num == maxNumImages ) { num = 0; }
              $('#the_image').attr('src', (++num)+'.jpg');
           }
        });

     });
  </script>

  <img id="the_image2" src="1.jpg">

  <input type="button" id="the_button2" value="change" />

  <script>
     // or in old fashioned (i.e. boring,sad,pathetic,vanilla) js:
     var maxNumImages = 5;
     var button = document.getElementById('the_button2');
     button.onclick = function() {
        var image  = document.getElementById('the_image2');
        console.log(image.src);
        var num = (image.src.match(/(\d+).jpg$/)||[false])[1];
        console.log(num);
        if( num !== false ) {
           if( num == maxNumImages ) { num = 0; }
           image.src = (++num)+'.jpg';
        }
     }
  </script>


  </body>
  </html>

Upvotes: 7

MC Emperor
MC Emperor

Reputation: 22977

PHP code only works inside the PHP opening and closing tags (<?php ?>).

The following block works:

<?php

$imageNumber = 1;

?>
<img src="<?php echo $imageNumber; ?>.jpg" />

Everything inside the PHP tags will be interpreted by PHP, the rest remains unaffected.
With the line <?php echo $imageNumber; ?>, PHP will echo ('send to the browser') the variable $imageNumber. Thus, the browser the receives this:

<img src="1.jpg" />

Upvotes: 1

Wouter J
Wouter J

Reputation: 41934

I hope this is not your only code??

  • You forget an echo (or print)
  • Strange single/dubbel quotes
  • strange dot

You are searching for something like:

<img src="<?php echo $imageNumber; ?>.jpg">

And to increase a number use ++

$i = 0;
echo ++$i; // echo's 1 (increase the number and print it)
echo $i++; // echo's 1 (print it and then increase the number)
echo $i; // echo's 2 (print the number)

And for a click on a button you can better use JS:

<img src="1.jpg" id="img-id">
<button id="increaseImg">Increase img</button>

<script>
  var img = document.getElementById('img-id'), // get the img tag
      btn = document.getElementById('increaseImg'), // get the button tag
      i = 1; // the number

  btn.onclick = function() {
    img.src = ++i + '.jpg'; // each click increase i and change the img src
  };
</script>

Upvotes: 2

j08691
j08691

Reputation: 207901

You have set the variable $imageNumber properly, however you then need to output it with echo:

<?php
$imageNumber = 1;
?>
<img src="<?php echo $imageNumber; ?>.jpg">

Upvotes: 1

thetaiko
thetaiko

Reputation: 7834

Try this. PHP variables will only be parsed inside the php tags.

<?php
$imageNumber = 1;
echo "<img src=\"{$imageNumber}.jpg\">";
?>

Upvotes: 1

circusdei
circusdei

Reputation: 1967

<?php
$imageNumber = 1;
?>
<img src="<?php echo $imageNumber;?>.jpg">

Upvotes: 1

Zenexer
Zenexer

Reputation: 19613

<?php
$imageNumber = 1;
?>
<img src="<?php echo $imageNumber; ?>.jpg" />

OR

<?php
$imageNumber = 1;
echo "<img src='$imageNumber.jpg' />";
?>

OR

<?php
$imageNumber = 1;
echo '<img src="' . $imageNumber . '.jpg" />';
?>

Don't use PHP for the click button thing. Use JavaScript.

Upvotes: 1

Farray
Farray

Reputation: 8528

$variables don't magically work outside of a PHP code block.

The following approaches would do what you're trying to do:

<?php
$imageNumber = 1;
echo '<img src="' . $imageNumber . '.jpg">';
?>

Or

<?php
$imageNumber = 1;
?>
<img src="<?php echo $imageNumber; ?>.jpg">

Upvotes: 1

Related Questions