$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>
Related
SO I try to preview an image from bbcode decoder the code work fine but issue is I need that image inside <a> href link so that people can click it and get the image source and also I put massage on that like: CLICK ON IMAGE FOR FULL SIZE,
So I put here a simple Jscript function and inside it I call a variable and put document.getElementById, after doing that then I put variable.innerHTML and put my image massage and <a href> value.
But when I run on my browser its just load like a endless loop. It just load over and over again.
Here is my full code: 1st code from php bbcode decoder and the 2nd code only html because I was not sure if my php code do that either way It not solving.
1st
<script>
function linkset(img) {
var fio=document.getElementById(img.name);
fio.innerHTML='<strong>Click on image for full size view.</strong><br />'+fio.innerHTML+'';
}
</script>
<?php
$img_count = 0;
function parseimage($matches)
{
global $img_count;
$img_count++;
return "\n<div id=\"img{$img_count}\" style=\"font-size:x-small; display:inline;\">\n<img name=\"img{$img_count}\" onload='linkset(this);' src='$matches[1]' border='0' alt='' /></div>";
}
$content = "[img]https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg[/img]";
$result = preg_replace_callback('/\[img\]((http|ftp|https):\/\/([a-zA-Z0-9\/\-\+\?\&\.\=\_\~\#\'\%\;]*))\[\/img\]/i', 'parseimage', $content);
?>
<?php echo $result; ?>
2nd
<script>
function linkset(img) {
var fio=document.getElementById(img.name);
fio.innerHTML='<strong>Click on image for full size view.</strong><br />'+fio.innerHTML+'';
}
</script>
<?php
$ssq = "https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg";
?>
<div id="img" style="font-size:x-small; display:inline;"><img name="img" onload="linkset(this);" src="<?php echo $ssq; ?>" border="0" alt="" /></div>
Result came like that:
<div id="img1" style="font-size:x-small; display:inline;">
<strong>Click on image for full size view.</strong><br>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
<img name="img1" onload="linkset(this);" src="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" alt="" border="0"></a>
</div>
This thing loop over and over but why??????????
<strong>Click on image for full size view.</strong><br>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
Please Help........
OK,,,,,,,, There is 2 way I tested....
1st is in JS obviously
<script>
function linkset(img) {
var massnlink='<strong>Click on image for full size view.</strong><br /><a href="'+img.src+'" target="_blank">'+img.name;
var photo='<img name="img" src="'+img.src+'" border="0" alt="" /></a>';
img1.innerHTML = massnlink + photo;
}
</script>
you can replace you js code
here if all code:
<script>
function linkset(img) {
var massnlink='<strong>Click on image for full size view.</strong><br /><a href="'+img.src+'" target="_blank">'+img.name;
var photo='<img name="img" src="'+img.src+'" border="0" alt="" /></a>';
img1.innerHTML = massnlink + photo;
}
</script>
<?php
$img_count = 0;
function parseimage($matches)
{
global $img_count;
$img_count++;
return "\n<div id=\"img{$img_count}\" style=\"font-size:x-small; display:inline;\">\n<img name=\"img{$img_count}\" onload='linkset(this);' src='$matches[1]' border='0' alt='' /></div>";
}
$content = "[img]https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg[/img]";
$result = preg_replace_callback('/\[img\]((http|ftp|https):\/\/([a-zA-Z0-9\/\-\+\?\&\.\=\_\~\#\'\%\;]*))\[\/img\]/i', 'parseimage', $content);
?>
<?php echo $result; ?>
And 2nd thing is that?????? why you need JS code??? you can use PHP all in all
Here is the code:
<?php
$img_count = 0;
function parseimage($matches)
{
global $img_count;
$img_count++;
return "\n<div id=\"img{$img_count}\" style=\"font-size:x-small; display:inline;\">\n<br>\n<a href='$matches[1]'><strong>Click on image for full size view.</strong><img name=\"img{$img_count}\" onload='linkset(this);' src='$matches[1]' border='0' alt='' /></a></div>";
}
$content = "[img]https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg[/img]";
$result = preg_replace_callback('/\[img\]((http|ftp|https):\/\/([a-zA-Z0-9\/\-\+\?\&\.\=\_\~\#\'\%\;]*))\[\/img\]/i', 'parseimage', $content);
?>
<?php echo $result; ?>
I can not discuss about PHP code cause it is so easy to understand.... But if you want I can give you note in comment.
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
When using below code share on Facebook but https://www.facebook.com/dialog/return/close#_=_ does nothing return.
<?php
$social_link = "https://www.google.co.in";
$sharelink = "http://www.facebook.com/sharer.php?u=".urlencode($social_link)."&t=&s=100";
$strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
echo "<script>var win = window.open('$sharelink', '_self', '$strWindowFeatures');</script>";
?>
You can create share button using the given tag and add given script in your script section
<a onclick="shareinsocialmedia('https://www.facebook.com/sharer/sharer.php?u=<?php echo $ShareUrl;?>&title=<?php echo $Title;?>')" href=""> <img src="images/facebook.gif" title="share in facebook"> </a>
<script type="text/javascript" async >
function shareinsocialmedia(url){
window.open(url,'sharein','toolbar=0,status=0,width=648,height=395');
return true;
}
</script>
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);
});
The variable in $pieces[12] is the url of an image on my server, some times when the page loads there is a broken image. My script is suppose to find the broken image error if there is one and replace it with $pieces[12] again. If that sounds right. But I don't know how to do it with my code.
<div class="right_ad" id="right_ad">
<script>
<img src="<?php echo $pieces[12]; ?>"
onError="this.onerror=null;this.src='<?php echo $pieces[12]; ?>';"
style="width: 100%;max-height: 100%"/>
</script>
</div>
You should urlencode those values. My tip is that there are special values in your filenames.
function onError_run_this_func(){
//get your new image url with ajax function
//or if you already have it in $pieces[12] then use it.
$.('.image-class).attr('src', '<?php echo $pieces[12]; ?>');
}
<div class="right_ad" id="right_ad"><script><img class="image-class" src="`<?php echo $pieces[12]; ?>" onError="onError_run_this_func()" style="width: 100%;max-height: 100%"/></script> </div>`