I created a database with a table that contain information about thousands of tracks.
One of these informations is the directory of the track to play when i click "Play".
while($row = mysqli_fetch_array($sqldata ))
{
echo "<tbody><tr><td>";
echo $row['position'];
$path = "audio/";
$track = $path . $row["path"] . ".mp3";
echo "</td><td>";
echo '<input type="image" src="images/play.png" width="20px" height="20px" onclick="play();">';
echo "<audio id='audio' src=$track></audio>";
echo '<input type="image" src="images/pause.png" width="20px" height="20px" onclick="pause()">';
echo '<audio id="audio" src=""></audio>';
echo "</td><td>";
etc..
The problem is that when I click "Play" in all of different tracks it play only the first track of "audio" folder.
What is the correct method to play different tracks depending on rows?
Thanks
SOLVED.
This is the solution:
Delete multiple audio tags and set only one audio tag out of table.
Send the path in the column as parameter to javascript play function and edit audio.src then audio.load and then audio.play.
echo '<input type="image" src="images/play.png" width="20px" height="20px" onclick="play(\''.$track.'\');">';
IMPORTANT: quotes and backslash are important to send a string.
Thank.
Related
a bit of a weird one, but I have figured out how to use glob to display a list of images, and now I want to add a button under each image that would let you delete each image individually, I think I just need to use unlink, but whenever I try it just seems to delete every file on the server!:')
Here is the code I have so far:
<?php
// This sets the variable $filelist, and get it to search the specificied levels of wildcards for jpg, png, JPG, and PNG using glob:
$filelist = glob('{*.jpg,*/*.jpg,*/*/*.jpg,*/*/*/*.jpg,*/*/*/*/*.jpg,*/*/*/*/*/*.jpg,*.png,*/*.png,*/*/*.png,*/*/*/*.png,*/*/*/*/*.png,*/*/*/*/*/*.png,*.JPG,*/*.JPG,*/*/*.JPG,*/*/*/*.JPG,*/*/*/*/*.JPG,*/*/*/*/*/*.jpg,*.PNG,*/*.PNG,*/*/*.PNG,*/*/*/*.PNG,*/*/*/*/*.PNG,*/*/*/*/*/*.PNG}', GLOB_BRACE);
// This filters the above into date order from newest to oldest:
usort($filelist, create_function('$a,$b', 'return filemtime($b) - filemtime($a);'));
// This is how I now output the data, basically looks for each value of $filelist and sets it as $link, then outputs this and concatenates it with itself as a href and a background-image:
echo '<div class="thumbnail-grid">';
if($filelist){
foreach($filelist as $link){
echo '<div class="tile-container">';
echo '<a style="background-image: url('.$link.');" class="photo-link" href="'.$link.'"><i class="fas fa-link"></i></a>';
// This adds in a delete button:
echo '<form method="post"><input style="cursor: pointer;" name="delete" type="submit" value="DELETE"></form> ';
echo '</div>';
// This is the script that should be doing the unlinking:
if(isset($_POST['delete']))
{
unlink($link);
}
}
}else{
echo ' No images found.';
}
echo '</div>';
Hope this all makes sense/isn't asking too much!
Many thanks, Jack.
This isn't very secure as anyone can send a POST variable with a filename and delete it.
But as an example, you can loop through the files and give the delete button a value of the filename and then when you check for the posted delete button delete the file.
// This is the script that should be doing the unlinking:
if(isset($_POST['delete'])){
unlink($_POST['delete']);
}
if($filelist){
foreach($filelist as $link){
echo '<div class="tile-container">';
echo '<a style="background-image: url('.$link.');" class="photo-link" href="'.$link.'"><i class="fas fa-link"></i></a>';
echo '<form method="post">
<input style="cursor: pointer;" name="delete" type="submit" value="'.$link.'">
</form> ';
echo '</div>';
}
}else{
echo ' No images found.';
}
I have created some code to make buttons clickable and return a value.
When I click on the image in the browser the querystring is showing the x-y coordinates of the image I am currently in, while it should put the name of the image in the querystring.
I also replaced the "value" value to "test" just to check if it works but I still get x-y coordinates.
<?php
$dirname = "images_fotoviewer/";
$images = glob($dirname."*.jpg");
foreach($images as $image){
echo "<form action='24_fotoviewer.php' method='GET'>";
echo "<input type='image' src='" . $image . "' name='foto' value='" . $image . "'/>";
echo "</form>";
}
?>
This is the querystring I get:
iwp1_basis_php/24_fotoviewer.php?foto.x=164&foto.y=48
Could someone help me to get the name of the image in the querystring?
Thanks in advance.
If you use input type="image" you will get a submitbutton as an image. It is default behaviour to send the x/y coordinates where you clicked it.
So to get the behaviour you want to try this:
Replace the form with an hyperlink (a href=...)
Create a hyperlink that contains the name of the image
Something like this:
<?php
foreach($images as $image){
?>
<a href="24_fotoviewer.php?imgName=<?php echo urlencode($image); ?>">
<img src=<?php echo $image; ?>
</a>
<?php
}
?>
By compiling this, display three image get my database and show it, when i click each image popup window show last image of my database.I want to know how to display the particular image, when i click first image,then popup window show first image and description, as well as same way second and third image. check to array loop in this code...
enter code here
<?php
$sql=mysql_query("select * from product_reg")or die(mysql_error());
while($row=mysql_fetch_array($sql))
{
$productname=$row['productname'];
$productid=$row['productid'];
$description=$row['description'];
$image=$row['image'];
$firstN = array();
$i=0;
$firstN = '<img src="'.$row ['image'].'">';
echo ' <a href="#" class="big-link" data-reveal-id="myModal" name="image" style="float:left;margin:100px 0 100px 100px;"> ' ; echo $productname;echo $firstN[$i];
$r=$firstN[$i];
echo '</a>';
$i++;
}
?>
<div id="myModal" class="reveal-modal">
<form>
<table>
<tr><td><?php echo $r; ?></td>
<td><h1>Reveal Modal Goodness</h1>
<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p></td>
<a class="close-reveal-modal">×</a>
</div>
</body>
</html>
I guess you have the images stored in the database like BLOB data. If so you need to create a handler to retrieve those images and render them as image/[mime]...
So in short.
In your code you need to create a new file iz get_image.php in it you need to make a request to the server and retrieve the image so you can send it to the client.
In your code you need to change the image path to the handler path with some query parameters.
$firstN = '<img src="get_image.php?imageid='.$row ['productid'].'">';
There are a lot information how to render the image to the client from the internet.
may be you have to declare your $firstN = array(); and then incrementor $i=0; out of while loop and put in array like this:
$firstN[$i] = '<img src="'.$row['image'].'">';
below is the full code:
<?php
$sql=mysql_query("select * from product_reg")or die(mysql_error());
$firstN = array();
$i=0;
while($row=mysql_fetch_array($sql))
{
$productname=$row['productname'];
$productid=$row['productid'];
$description=$row['description'];
$image=$row['image'];
$firstN[$i] = '<img src="'.$row['image'].'">';
echo '<a href="#" class="big-link" data-reveal-id="myModal" name="image" style="float:left;margin:100px 0 100px 100px;"> ';
echo $productname;
echo $firstN[$i];
$r=$firstN[$i];
echo '</a>';
$i++;
}
?>
Updates:
You have a space here:
$firstN[$i] = '<img src="'.$row['image'].'">';
//-----------------------------^----here at this code block;
To get the last image , you need to modify your query to have SORT BY productid DESC
To display the images
echo "<a href='xxx.php?imgid=$image'><img src='yourimagesfolderpath/$image.jpg'> </a>";
to navigate in the images , you have to use JQUERY
I don't know exactly where to start to display files from the file set in order to show a fancybox gallery on click. I would like to have the gallery open from a link. On click show the gallery, aka images that have the same rel but are set to display:none (easily controlled by my css). I can do it from selecting one image but am not sure how to pass the images from the file set into the view (I'm assuming I need to create some kind of function in my controller to get the fsID, just not sure how). I just need the first image to display on the page (thumbnail image), then click the link and it shows more full size images.
Basically, if you know Concrete5, I would like it to be like the image block, except that the administrator can choose a fileset instead of one image.
here is my view.php
$picture = $this->controller->getPicture();
if ($picture) {
$bigPicture = $image->getThumbnail($picture,600,600)->src;
$smallPicture = $image->getThumbnail($picture,200,200)->src;
echo "<img src=" . $smallPicture . " alt=" . $imageTitle . " title=" . $imageTitle . "/>";//thumbnail picture
echo "<div id=\"image-modal\">";
echo "{$linkText}";//open fancybox from link
echo "<div class=\"hiddenGallery\" style=\"display:none;\">";//hidden images
echo "<a href=\"images/pattern/t-103-n.jpg\" class=\"fancybox-thumb\" rel=" . $title . " title=" . $imageTitle . ">";
echo "<img src=\"images/pattern/t-103-n.jpg\" class=\"fancybox-thumb\" />";
echo "</a>";
echo "</div>";
echo "</div>";
}
my controller.php
function getPicture() {
if ($this->fIDpicture > 0) {
return File::getByID($this->fIDpicture);
}
return null;
}
my add.php
$al = Loader::helper('concrete/asset_library');
echo $al->image('ccm-b-image', 'fIDpicture', t('Choose File'),
$this->controller->getPicture());
echo '</div>';
Any and all help is much appreciated.
Well, two things :
You have to set the class="fancybox-thumb" AND the rel attribute to the <a> tag!!, not to the <img /> tag.
If you are planing to hide the rest of the elements of the gallery, don't set a display: none; css property to each of them, but rather wrap them in a hidden <div> container like :
<div style="display: none;">
<a class="fancybox-thumb" rel="gallery" href="images/02.jpg"></a>
<a class="fancybox-thumb" rel="gallery" href="images/03.jpg"></a>
<a class="fancybox-thumb" rel="gallery" href="images/04.jpg"></a>
... etc
</div>
I am using the rendered html, which is what it matters.
I have some code which handles the entire back-end (add/edit/controller) part of this equation:
https://github.com/jordanlev/c5_designer_gallery
Here's a tutorial that explains how to use it (with the example of the FlexSlider, but if you know how Fancybox works then it shouldn't be hard to understand what's going on):
http://c5blog.jordanlev.com/blog/2011/12/build-a-slideshow-block/
I have the following line:
<td><img src="Photos/<? echo $rows['photo1']; ?>" height="200" /></td>
I don't always have a photo. I would like to hide the image space. It looks like it is broken or if the url is wrong.
<td><?php echo (!empty($rows['photo1']) ? '<img src="Photos/' . $rows['photo1'] . '" height="200" />' : '') ?></td>
To have no <img> tag appear for blank values, I'd use something like this:
<?php if (($rows['photo1'] !== "") || ($row['photo1']))
{
echo "<td><img src='Photos/" . $rows['photo1'] . "' height='200' /></td>";
}
?>
if (image is not blank, and it exists) {
then, echo the img tag and the variables
}
Alternatively, If you want to display a different image for blank values:
<td>
<img src="Photos/<?php if ($rows['photo1'] !== ""){echo $rows['photo1'];}
else {echo "defaultimg.jpg";}?>" height="200" />
</td>
Hope this helps :)
Perhaps this is more to your liking:
<img src="Photos/<? echo $rows['photo1']; ?>" height="200" onerror="this.style.display='none'" />
It sets the image to not show when there is a problem (such as a broken URL).
This has the advantage of avoiding ternaries, separates PHP from HTML, and keeps things clear without excessive documentation. Hope it helps.