We Keep Coding

how to download an image on click of button in php

$select_pic = "SELECT pic.photo_link,od.* from orders as od inner join photo as pic ON pic.user_id = od.user_id WHERE od.id = '".$orderid."'";
$pic = $common->select_inner($select_pic);
foreach($pic as $photo){
}
I am getting images from this in $photo['photo_link'];
I want to download picture on click of download button how can i do this using php or javascript.
<a download="<?php echo $photo['photo_link']; ?>" title="ImageName">
<img alt="ImageName" src="uploads/category/<?php echo $photo['photo_link']; ?>">
</a>
I have tried this but its not working

You are missing href attribute in tag.
I have checked with below code working:
<a href="" download="<?php echo $photo['photo_link']; ?>" title="ImageName">
<img alt="ImageName" src="uploads/category/<?php echo $photo['photo_link']; ?>">
</a>
Please see following link for your reference: href image link download on click

Try this code
<a href="uploads/category/<?php echo $photo['photo_link']; ?" download>
<button>Download</button>
</a>

change main image by click left or right arrow or selecting actual image from thumbnail gallery in PHP

i'm developing a pdf book page viewer, i have many books that has more than 100 pages in my mysql database. so i fetch the book pages into my thumbnail gallery and if i select that image it will add img src to main image and display it on main image div, that works perfectly, here i have right and left arrow buttons next to main image, if i click these buttons the image should select next image or previous image. i was trying to get the idea and trying different source i could not get the output, please help me with this, i have added my codes bellow,
PHP
<button class="left-arrow" id="left-arrow">Left</buttom>
<img src="" alt="book" class="main-img" id="main-img">
<button class="right-arrow" id="right-arrow">Right</buttom>
<ul class="book-list id="book-list">
<?php if ($total_page > 0) : ?>
<?php foreach ($results as $row) : ?>
<li class="book p-2">
<span class="page-number"><?php echo $page_num++ ?></span>
<img src="<?php echo PAGE_URL . "/" . $b_id . "/" . $row->page_name ?>" alt="Book Image">
</li>
<?php endforeach ?>
<?php endif ?>
</ul>
JavaScript
<script type="text/javascript">
var bookPageList = $('#book-list');
$(bookPageList).click(displayImage);
function displayImage(e) {
if (e.target !== e.currentTarget) {
var target = e.target;
var src = target.src;
// console.log(src);
$('#main-img').attr('src', src);
}
}
</script>

I have fixed this issue in this link, hope this help to other newbies
Change image by selecting from thumbnail or next prev buttons

Click to copy each attribute href of a tag into image source [duplicate]

This question already has answers here:
jQuery ID selector works only for the first element
(7 answers)
Closed 5 years ago.
My image link sources in for loop
foreach (images as image) {
echo ?> <a id="image" onclick="return false;" href=" my image link" >
<span > <?php echo $image->imageName; ?></span> <?
}
Output for image link something like
Link1
Link2
Link3
HTML to show image
<img id="copyimage" src="" alt="No Pic" style="width:304px;height:228px;">
My Jquery
(document).ready(function(){
$("#image").click(function(){
var link = $(this).attr('href');
$("#copyimage").attr("src", link);
});
});
when I click to each link (Link1 Link2 Link3) ,I want to copy each of them into image source to show image. But it just only worked for first link (Link1) and Link2 Link2 didn't.

all the link have the some ID id="image" you need to use class :
foreach (images as image) {
echo ?> <a class="image" onclick="return false;" href=" my image link" >
<span > <?php echo $image->imageName; ?></span> <?
}
Jquery
(document).ready(function(){
$(".image").click(function(){
var link = $(this).attr('href');
$("#copyimage").attr("src", link);
});

show image with popup

Hei
I Have this code, to take the pictures from a folder and show them on the page. But when I click on the image, it will open on the same page. So I have to click one page back...
But i wanna that when I cklick on a n image, that the image open with a popup and I can click there "back or next" to see the other images.
What I Have to change in the code?
Thanks a lot
<div id="galima">
<?php
$folder_path = 'gallery/images_nature/'; //image's folder path
$num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);
$folder = opendir($folder_path);
if($num_files > 0)
{
while(false !== ($file = readdir($folder)))
{
$file_path = $folder_path.$file;
$extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
if($extension =='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp')
{
?>
<img src="<?php echo $file_path; ?>" height="250">
<?php
}
}
}
else
{
echo "the folder was empty !";
}
closedir($folder);
?>

What you need is named Lightbox but
here i am giving a simple example of creating new window in js. May be this will give you a better understanding to implement it in your code.
copy this code into any html file and see the output. i don't know why i can't
add it in code snippet -_-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="">
<img src="http://images5.fanpop.com/image/photos/31300000/beautiful-heart-pic-beautiful-pictures-31395948-333-500.jpg" width="50" height="50" alt="Click to enlarge"
onclick="enlarge(this)" />
</a>
<a href="">
<img src="https://s-media-cache-ak0.pinimg.com/736x/0e/38/60/0e38604bb8c49acf8eb409dc5f9caa15.jpg" width="50" height="50" alt="Click to enlarge" onclick="enlarge(this)" />
</a>
<script type="text/javascript">
var windowFeatures = "'menubar=no,status=no,scrollbars=no,toolbar=no,resizable=no,width=500,height=350,left=400,top=100'";
function enlarge(x) {
window.open(
x.src,
'largeimage',
windowFeatures
);
}
</script>
</body>
</html>

you can open the image in a new page using target _blank like this
...

How to pass data of a JavaScript variable to another php page?

I have two pages: test.php and backend.php.
test.php has three images which when clicked takes the user to backend.php. I want the src of the image clicked to be displayed on backend.php. I am trying to achieve this task via JavaScript and Ajax but the src of the image doesn't appear on backend.php. Code for the same are given below:
test.php:
<?php
session_start();
?>
<html>
<head>
<script src="jquery-1.9.1.js">
</script>
<script>
function clickIt(data){
$.ajax({
url: 'backend.php',
data: {"imgsrc":data},
type: 'post',
success:function(res){
alert(res.message);
}
});
}
</script>
</head>
<body>
<a href="backend.php">
<img onclick="clickIt(this.src)" src="img1.jpg"/>
</a>
<a href="backend.php">
<img onclick="changeIt(this.src)" src="img2.jpg"/>
</a>
<a href="backend.php">
<img onclick="changeIt(this.src)" src="img3.jpg"/>
</a>
</body>
</html>
backend.php:
<?php
session_start();
?>
<?php
echo $_POST['imgsrc'];
echo 'Back';
?>
What am I possibly doing wrong?

Try this;
HTML:
<body>
<a href="javascript:void(0);">
<img onclick="clickIt(this.src)" src="img1.jpg"/>
</a>
<a href="javascript:void(0);">
<img onclick="changeIt(this.src)" src="img2.jpg"/>
</a>
<a href="javascript:void(0);">
<img onclick="changeIt(this.src)" src="img3.jpg"/>
</a>
</body>
Jquery:
function clickIt(data){
window.location.href = 'backend.php?imgsrc='+data; // redirect to backend.php
}
In backend.php
<?php
echo $_GET['imgsrc']; // use $_GET
echo 'Back';
?>

Click event of tag is not firing because tag takes the
page to backend page before tag click event gets fired. You can resolve this problem simply by removing the tag from each line.
You cannot access ajax response as res.message as you haven't echo the response in json format. You can access response simply from res variable
Also change the function name to changeIt to clickIt as you have defined function has clickIt
// use only res
success:function(res)
{
alert(res);
}
<img onclick="clickIt(this.src)" src="img1.jpg"/>
<img onclick="clikcIt(this.src)" src="img2.jpg"/>
<img onclick="clickIt(this.src)" src="img3.jpg"/>