I'm wondering if there's some way to prompt the image dialog box through javascript or html by clicking on an image. The ultimate goal is to have the image that is clicked on be a cropped version of the uploaded image and if you'd like to change it you click on it.
EDIT: Sorry for not being more clear, this is for a web page. When I say image dialog box I mean the file upload dialog box (the one you get when you use an html form). The idea is once the image is selected in the dialog box, it begins uploading to the site so it can be displayed immediately on the page.
<IMG SRC="image url" ALT="alt text">
for action here, would be the action, for what you're attempting to do, i'd recomend using javascript
so it'd be like this (as an example)
<IMG SRC="/images/this.png" ALT="alt text">
Related
I have a edit news page with a form, inside form I have this code below to show the actual image of my news.
Im using tim.php to generate thumbnails. And it is working fine, Im having thumbnail of my image, but then I have a link to click and see the original image(not the thumbnail), and when I click in this link "See actual image", Im having an old image and not my recent image. But this only happenins on internet explorer, on google chrome is working fine.
Do you see why this can be happening?
I have this code below inside a form,
<div class="viewImage">
<img src="tim.php?src=../uploads/<?php echo $result['thumb'];?>&h=45" alt="Actual image" title="Actual Image" />
See Actual Image
</div><!--viewcapa-->
I have this code :
<div class="images_liste_plante_solo">
<div class="image_liste_plante">
<img alt="Hosta - Eternal Flame" src="images/eternal_flame_miniature.jpg"/>
</div>
<div class="image_liste_plante">
<img alt="Hosta - Eternal Flame" src="images/eternal_flame-2_miniature.jpg"/>
</div>
<div class="image_liste_plante">
<img alt="Hosta - Eternal Flame" src="images/eternal_flame-3_miniature.jpg"/>
</div>
</div>
I will have a variable number of pictures like this, because the number of pictures depends of my PHP database. I can also echo out the directory of the fullscreen size picture and can choose what is the max size (if they are enough big to reach it) of all pictures.
So, I will need that when we click on the picture, that it enlarge it with a fullscreen gallery over the page that darken what is behind, a bit like when we want to enlarge pictures in facebook. It will only use the images with a class of "image_list_plante" and it will use my echoed link to the fullscreen image for each images (maybe this link could be echoed in an invisible div). Also, I will echo (in the invisible div) a boolean which decide if you can right click on the picture or not. I will even echo text that will be placed under or over the picture. The invisible div will be inside each "image_liste_plante" divs and after or before the picture. I can put classes to these invisibles divs if needed, etc...
How do I do that ? hard question. I know nothing about JavaScript and jQuery and others... The only things I know, it's HTML/CSS/PHP/PDO.
Do a plugin that I can modify and adapt is already built ? for the moment, I will only put a link to a .jpg file on the pictures.... but it can't stay like this too long.
*Will need to work in IE7 and other browsers too.
Finally, i used a plugin called "colorbox". It opens an iframe over the page according to it's link. The page in the iframe know which plant's images to show by using the $_GET vars from the generated link. In this iframe, i needed to code a secure database connection defined by the $_GET elements. it counts the nuber of pictures, paginate them and everything. Thanks to myself !
I'm trying to protect images with a watermark, but I don't want to display the images on the website with the watermark. I created a php script that dynamically watermarks an image on the fly, but here's what I'd like to do with it:
I'd like for whenever someone right clicks and presses "save as" an image displayed on my website for it link to a different image that is watermarked. Is that possible? Should I go about this another way?
Any response in the right direction is greatly appreciated.
Here's an example: http://fatpita.net/?i=14453
When you save this image, the saved image is watermarked, but the website's image is not... I think they actually just mask the watermark on the website though.
Thanks!
What you are trying to achieve is not possible in a safe way.
If the browser gets the unwatermarked file the user can save that file - maybe not using "save image as" but e.g. through Firefox's "page info dialog which contains a full media list.
You can't do anything that the user can't fake. The site you mentioned doesn't either - the watermark is always there.
Look at the actual source:
<div style="position:relative;width:768px;margin:9px auto 0;">
<a href="http://fatpita.net/?i=4011" id="image">
click on the image for another random funny picture<br>
<img src="images/image (14453).jpg?4011">
</a>
<div id="jpgCover">
</div>
</div>
They are actually covering over the watermark in HTML. It is still there, but there is a div in the way making sure you can't see it.
Remember the user can always remove this watermark by an easy crop.
I'm using the JQuery prettyPhoto lightbox clone, and it works great, but I have one small issue.
All images have the following format:
<a href='imageURL' rel='prettyPhoto[gallery1]'><img src='imageURL' style='height:100px;' title='photoname' /></a>
I have 4 images showing and another 10 hidden using a <div> with style='display:none;'. Clicking any of the 4 images opens the gallery, showing all 14 photos. That's fine.
But I also need to have a link saying 'view all 14 photos' that, when clicked, opens the gallery. Now, if I don't give <a href='imageURL'> to the text link, it doesn't work. But if I link it to, for example, the first image, then that image is shown twice in the gallery. How can I avoid that?
I thought about linking the text link to one of the hidden images instead, but that's not a solution, since the 4 visible images are randomly chosen using PHP.
Change your link to:
<a id="startPrettyPhoto">View all photos</a>
And add this to the document ready where you set up prettyPhoto
$("#startPrettyPhoto").click(function() {
$("a[rel^='prettyPhoto']:first").click()
});
i need jquery for images display like in the below URL.
http://www.yessy.com/sujatatibre/collectors.html?p=1
i didn't find any jquery in the web for that.how can i display like that?.
They don't use JavaScript. They just have two versions of each image, a small one and a large one, then they:
<a href="document-that-includes-the-large-image.html">
<img src="the-small-image.jpeg" …>
</a>
in a project where i need to show large image on click of image :-
i pass the big image reference as href of anchor who i put upon image and show them in fancybox when user click on it.
you can find out fancybox
http://fancybox.net/
the mockup someting like
<img src="small.png" alt="small image"/>