I'm making a form in php. I want the visitor to either upload an image (that part is done) or select one from the uploaded files. Is there any cool jQuery/php script that will solve this?
I'm thinking a small dialog that shows all the images from a selected folder. When the visitor clicks on foo.jpg (with thumbnail) the value in the text field would be "foo.jpg"
Any ideas?
Thanks!
Just scan the images directory like that:
<?php $dir = '/path/to/dir';
$files1 = scandir($dir);
foreach ($files1 as $value) {
echo '<p class="images">'.$value.'</p>';
echo '<img class="clickableimg" id="'.$value.'" src="path/to/'.$value.'" />';
} ?>
And you can add event on class 'images':
<script>
$(".images").click(function() {
var choosenpic = $(this).html();
$("#yourinputfieldID").val(choosenpic);
});
$(".clickableimg").click(function() {
var choosenpic = $(this).attr('id');
$("#yourinputfieldID").val(choosenpic);
});
</script>
Related
I want to open a new page and transfer data from an array. Using the name of the image seemed like the easiest way so that's what i want to do.
on the page i want to call it
function meghiv($img)
{
$be=$img.alt;
echo $be;
session_start();
$_SESSION['kod'] = $be;
}
for($j=0;$j<4;$j++)
{
echo ' <img src="'.$nevek[$i].'.png" class="card-img-top " alt="'.$i.'" onclick="meghiv(this)"> ';
$i++;
}
on the new page
<?php
session_start();
echo $_SESSION['kod'];
?>
I don't know if it answers your question but try using javascript to load the image name into your php file
let images = document.querySelectorAll('.card-img-top'); // returns NodeList
let img_list = [...images]; // converts NodeList to Array
img_list.forEach(div => {
div.addEventListener("click", function(e){
e.preventDefault()
let alt = div.getAttribute("alt")
window.open(`https://link.here/?alt=${alt}`, "_blank");
})
});
Then in your php file
$image_name = $_GET['alt'];
I have an angular app that will display some images. I am opening a prettyPhoto ajax window and passing the pathname to the URL. My script is loading the image fine, however, it isn't displaying the image how prettyPhoto traditionally displays a photo.
What do I need to do so it behaves like it is displaying a photo? i.e: has the fullscreen button, resizes the lightbox to the photo etc.
Is that even possible?
I am opening the lightbox via:
$scope.openLightbox = function()
{
if (typeof $.prettyPhoto.open !== "function")
{
$.fn.prettyPhoto({
social_tools:false,
deeplinking: false,
keyboard_shortcuts: false
});
$.prettyPhoto.open('resources/php/view/lightbox.php?ajax=true&path=' + $base64.encode($scope.currentFile));
return;
}
$.prettyPhoto.open('resources/php/view/lightbox.php?ajax=true&path=' + $base64.encode($scope.currentFile));
}
$scope.currentFile would be something like: data/39/my_image_name.jpg
and I am parsing the PHP like so:
$path = base64_decode($_GET['path']);
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime = finfo_file($finfo, $path);
$mimeExt = explode('/', $mime);
if ($mimeExt[0] == 'image')
{
echo '<img width="100%" height="100%" src="data:image/' . $mimeExt[1] . ';base64,' . base64_encode(file_get_contents($path)) . '">';
}
elseif ($mimeExt[0] == 'video')
{
}
finfo_close($finfo);
Like I said above, the image is displaying just fine, I just want it to be displayed with the standard prettyPhoto image behavior. I understand this may not be possible.
EDIT
So turns out I didn't need AJAX afterall:
$scope.openLightbox = function()
{
if (typeof $.prettyPhoto.open !== "function")
{
$.fn.prettyPhoto({
social_tools:false,
deeplinking: false,
keyboard_shortcuts: false
});
$.prettyPhoto.open('resources/php/view/lightbox.php?path=' + $base64.encode($scope.currentFile));
return;
}
$.prettyPhoto.open('resources/php/view/lightbox.php?path=' + $base64.encode($scope.currentFile));
}
and finally my php which I am outputting the image directly to the browser so prettyPhoto thinks it is just loading an image
<?php
require("../config.php");
require("../connect.php");
session_start();
if (isset($_SESSION['ds_level']))
{
$path = base64_decode($_GET['path']);
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime = finfo_file($finfo, $path);
$mimeExt = explode('/', $mime);
if ($mimeExt[0] == 'image')
{
header('Content-Type: image/' . $mimeExt[1]);
echo file_get_contents($path);
}
elseif ($mimeExt[0] == 'video')
{
//do other stuff to display video
}
finfo_close($finfo);
}
else
{
//-- no access
}
?>
What do I need to do so it behaves like it is displaying a photo? i.e: has the fullscreen button, resizes the lightbox to the photo etc.
Is that even possible?
Yes, it is possible. You need to create a dedicated directive, as specified in this Gist:
.directive('prettyp', function(){
return function(scope, element, attrs) {
$("[rel^='prettyPhoto']").prettyPhoto({deeplinking: false, social_tools: false});
}
})
To apply it, specify rel="prettyPhoto" in the anchor, like so:
<a prettyp ng-href="{{image.url}}" rel="prettyPhoto[main]" target="_blank" title="{{image.title}}">
HOW IT WORKS
The directive looks for a rel attribute starting with prettyPhoto, and applies the prettyPhoto magic to it.
EXAMPLE
I made a Plunk you can play around with: check the Plunk
IN YOUR CODE
To apply the directive in your code, you could replace:
echo '';
with:
echo '<img width="100%" height="100%" src="data:image/' . $mimeExt[1] . ';base64,' . base64_encode(file_get_contents($path)) . '">';
EDIT AFTER CHAT SESSION
As your images are protected with .htaccess, you have opted to work with a base64 version of your image, and why not?
However, it seems that if you wait until the user clicks the 'view' button in your app, it takes too long to go fetch the protected image and encode it, before passing it on to prettyPhoto:
I recommend you go fetch your image before the user clicks the view button, when the user selects the image in the list.
The long process of:
make an ajax call to php server;
have php app fetch image;
have php app encode image;
have angularjs/javaScript app store the base64 string
can then be done automatically, preventively, in the background.
The user experience would then be optimised.
So when the user does click the view button, the base64 version of the image can be passed to prettyPhoto straight away, without any server call: this would produce the same result as displayed in the plunkr I provided, when the button is pressed.
I have a comics website which loops through all images in a db and displays them as thumbnails.
The user can click on one of those images to see it in normal size on a viewComic.php template.
I'd like to allow users to press left and right arrows to navigate images.
So, my idea is:
pagination.php handles image display on correct pages (by offsetting) by looping through database result array. The user can click on a result (below) to go to that specific image on the viewcomic.php template.
'<br />IMG: <a href="./templates/viewcomic.php?id=' . $row['imgid'] . '&image=' . $imgpath.$row['imgname'] . '">
Now on viewcomic.php, I get the id and image, and display the image
$imgid = $_GET['id'];
$imgpath = $_GET['image'];
<center><img src=".<?php echo $imgpath ?>" /></center>
The user can press left and right arrows to navigate through images...
My goal was to somehow increment the image id to move to the next image, but that doesn't seem to be working...
<script type="text/javascript">
$(document).ready(function() {
$(document).keydown(function (e) {
if (e.which == 39) { //get next image
<?php
$count = 0;
$count++;
echo "<img src=" . $imageArray[$count] . "/>";
?>
}
});
});
</script>
Any ideas?
EDIT: I'm going to go through an image array passed in from pagination.php.
So, in my viewcomic.php file, I've updated my jquery script (see above).. but the jquery doesn't seem to like the embedded php, even though it's all in a php file.
Here's a picture of page source vs code:
Here is what i would do:
assuming that an imagepath is surrounded by quotes:
echo $imageArray[0]; // 'imagepath/image'
Script:
<script type="text/javascript">
var imgArray = [<?php echo implode(',',$imageArray) ?>];
// now the image array have the list of all your images.
$(document).ready(function() {
var img = document.getElementById("theImage");
imgIndex = 0;
$(document).keydown(function (e) {
if (e.which == 39) { //get next image
img.src = imgArray[imgIndex++]
}
... /* Logic to check if at the end of imageArray */ ...
});
});
</script>
The Html:
<center><img src="" id="theImage"/></center>
How about:
$(document).ready(function() {
$(document).keydown(function (e) {
if (e.which == 39) {
var nextId = $_GET['id'] + 1;
window.location = "./templates/viewcomic.php?id=" + nextId;
}
});
});
In this case your page is submit on every request, You can also handle this at client site.
Click link to see demo about rotate link using JavaScript. : Link Rotate using javascript
I wonder whether someone may be able to help me please.
I'm using this page to allow users to view a gallery of their uploaded images.
Upon upload, the images are saved in this filepath UploadedFiles/userid/locationid/image and the details of the image i.e. name, description etc are saved in an XML file called files.xml which located in the same directory as the images. An extract of this is shown below:
<?xml version="1.0" encoding="utf-8" ?>
- <files>
<file name="AC-0003749-Clark_145520.jpg" source="AC-0003749-Clark_145520.jpg" size="3873" originalname="AC-0003749-Clark_145520.jpg" description="No description provided" userid="1" locationid="1" />
</files>
The gallery gives additional functionality to the user by, via the icon under each image, the ability to delete each image. This is done via the following code:
Icon click Event
<script type="text/javascript">
Galleria.ready(function() {
this.$('thumblink').click();
$(".galleria-image").append(
"<span class='btn-delete ui-icon ui-icon-trash'></span>");
$(".btn-delete").live("click", function(){
var img = $(this).closest(".galleria-image").find("img");
// send the AJAX request
$.ajax({
url : 'delete.php',
type : 'post',
data : { image : img.attr('src') },
success : function(){
alert('Deleting image... ');
img.parent().fadeOut('slow');
}
});
return false;
});
});
</script>
delete.php - Amended Code
<?php
if (!empty($_POST)) {
$image = $_POST['image'];
if (file_exists($image)) {
unlink($image);
}
}
$doc = new DOMDocument;
$doc->load('files.xml');
$thedocument = $doc->documentElement;
$list = $thedocument->getElementsByTagName('files');
$nodeToRemove = null;
foreach ($list as $domElement){
if ($attrValue == '$image') { $domElement->parentNode->removeChild($domElement); }
}
if ($nodeToRemove != null)
$thedocument->removeChild($nodeToRemove);
echo $doc->saveXML();
?>
The deletion of the physical image works fine, but I'm having great difficulty in working out how to delete the relevant child node. Although I receive no error message the node is not deleted. I have received some guidance here from this site about how to go about this, i.e. via PHP XML DOM, but to be honest the more I read about this, the more I get confused. I just can't seem to get my head around it.
I just wondered whether someone could have a look at this please and let me know where I've gone wrong.
Many thanks and kind regards
To remove a node that was found with getElementsByTagName you can use the following to remove it:
if (!empty($_POST)) {
$image = $_POST['image'];
if (file_exists($image)) {
unlink($image);
}
$doc = new DOMDocument;
$doc->load('files.xml');
// iterate over all tags named <file>
$list = $doc->getElementsByTagName('file');
foreach ($list as $domElement) {
// check whether attribute 'source' equals $image
if ($domElement->getAttribute('source') == $image) {
// remove the node
$domElement->parentNode->removeChild($domElement);
}
}
echo $doc->saveXML();
}
i'm creating a simple slideshow. 4 images coming from db by php stored in a div called home_gallery_thumb with relative position and the images are wrapped inside anchor tag trying to change them with a next and previous buttons but it jumps to the third image then everything stops completely though it works without any problem if these images are static not coming from the db here's the div fetching images
<div class="home_gallery_thumb" style="background-color:#006; position:relative;">
<?php
require('_req/base.php');
$getImgsQ = "select Photo_Name from photos order by Photo_ID DESC limit 4";
$getImgsR = mysql_query($getImgsQ);
while($galleryRow = mysql_fetch_array($getImgsR)){
?> <a class="galleryLink" style="position:absolute;" href="products_large/<?php echo $galleryRow['Photo_Name']; ?>"><img src="products_thumb/<?php echo $galleryRow['Photo_Name']; ?>" /></a> <?php
}
mysql_close($connect);
?>
so now i have links with images inside the div and here's the jq code
$(".home_gallery_thumb a.galleryLink").css("display","none");
$("a.galleryLink:first").fadeIn(500);
var allImgs = $(".home_gallery_thumb a").length;
$(".next").click(function(){
var curImg = $("a.galleryLink:visible").index();
var nxtImg = curImg+1 ;
if(nxtImg == allImgs) { nxtImg = 0; }
$("a.galleryLink:eq("+curImg+")").fadeOut(800,function(){
$("a.galleryLink:eq("+nxtImg+")").fadeIn(800);
});
});
$(".previous").click(function(){
var curImg = $("a.galleryLink:visible").index();
var prevImg = curImg-1 ;
if(prevImg == -1) { prevImg = allImgs-1; }
$("a.galleryLink:eq("+curImg+")").fadeOut(800,function(){
$("a.galleryLink:eq("+prevImg+")").fadeIn(800);
});
});
this code is inside document.ready and that's what i noticed through firebug
first : images load and all other links are : display:none
after clicking next button first link doesn't get display:none style and it jumps to the third link making it visible then everything stops. And the previous button does nothing at all as it doesn't exist
try this, if not work, provide a link to your slide
$("a.galleryLink").hide();
$("a.galleryLink:first-child").fadeIn(500);
$(".next").click(function(){
var curImg = $("a.galleryLink:visible");
var nxtImg = curImg.next();
if(!nxtImg.length) { nxtImg = $("a.galleryLink:first-child"); }
curImg.fadeOut(800,function(){
nxtImg.fadeIn();
});
});
$(".previous").click(function(){
var curImg = $("a.galleryLink:visible");
var prvImg = curImg.prev();
if(!prvImg.length) { prvImg = $("a.galleryLink:last-child"); }
curImg.fadeOut(800,function(){
prvImg.fadeIn();
});
});