I want to show images like google search images.like when someone click on a particular image the thumb image get load first until the actual image get loaded,when the the actual image gets loaded the thumb is replaced by the actual image.
Please help me.Any help will be greatly appreciated.
First you must know if you image is already loaded than you will replace it.
$('img.mustLoad').on('load',function(){
/* Fire your image resize or thumb replacement code here */
});
Related
When creating a new page I want to select an image from a gallery of all images previously uploaded. I've tried searching for a solution for a few hours but can't seem to find any good answers. I already know how to upload and display the images to a gallery from the database.
What I don't know is how to make it so you can select an image and assign it to that page/content.
It's not something that happens automatically. You have to code it.
The algorithm would look something like this:
Display thumbnails with the url/id of the full size picture (see Creating a thumbnail from an uploaded image);
On click, add the url of the picture you want to use on that page.
I have successfully uploaded an image in folder application/uploads codeigniter. When I'm trying to display the image in an <img> tag its not showing. I've checked the path is correct and the image does exist.
Just hit that image src link on browser and check whether image is displaying or not. You can upload your images in assets folder. Call your image by using url https://yoururl.com/assets/imgfolder/img.jpg . It should display. Hope this will help you.
Can you show us the tag you are using with the path. If you believe the path is correct, can you type this path straight into your browser and see the image displayed? You can do a 'view source' to get the path if you are using Codeigniter base_url or similar.
(sorry to post this as an answer but my rep isn't high enough to allow commenting)
hi i have a wordpress at lesprenoms.quebec it's listing the name of people with a short description.
if you take a look at this post:
http://lesprenoms.quebec/qeZN30e9
it's a simple div with image as background with text on top and an other image at the bottom what i want is that wordpress generate all the thumbnail i want and also the one for facebook witch is 750*394px crop top when i hit publish or like save the draft and else and that it get update if i change the text on top of the image.
some will tell me to do this trough photoshop and else witch i already did for the 170 other image but i think i can made template, then just upload the image and just add my text that all trough the website without having to fire photoshop witch can be really usefull as if i'm on other computer and else...
so i know there a way to do this in php with maybe imagefttext or something like that. All the thing is wrap in a div so maybe a function that get all the text + image between the first and the last could be really nice and neat.
so if someone can help cause i really need your help guy...
I've searched for ages for a solution, but I can't really find the solution to fit my needs.
So here's the story. Im creating a website and I really want to add watermarks to the downloaded images.
Yesterday I was browsing in a website called 9gag. If you haven't heard this website before, its a comic based website, and I found out that when you download an image, or access an image from anywhere else except their website, there's a 'watermark/banner' at the bottom of the image.
For example take this image:
link , notice no banner at the bottom of the image.
If you right-click, 'Copy image URL' , you get this link: image . See the banner now?
Im very confused on how they do it, and it would be great if we could use this on our websites.
Anyone with any ideas? Is it using any type of CGI?
P.S: I Wasn't sure what tags to add, So if anyone knows a better tag combination, please do edit it.
This effect is just a css trick. The image itself actually contains the watermark at the bottom, but the image tag is wrapped in a block that hides (overflow:hidden) the bottom 42 pixels of the image when it's being displayed in the page.
There are other things you can do that are more sophisticated (for instance, have the image served via a php script and comparing the http referer
header("content-type: image/jpeg");
if (!isset($_SERVER['HTTP_REFERER'])){die("alert('Restricted Access!');");};
$_u=parse_url($_SERVER['HTTP_REFERER']);
$_u=preg_replace("/(www.)/i","",strtolower($_u['host']));
$_i=$_SERVER['HTTP_HOST'];
$_i=preg_replace("/(www.)/i","",strtolower($_i));
if ($_u != $_i){
//handle this with gd or redirect
}
) but this will only work if someone tries to load the image from a different website or if they go to the image url... generally save-as will save the image from the browser's cache, so the css trick might be the best option you have (or a combination of these options). Fundamentally keep in mind that anything you show on the web can be captured (the code above isn't foolproof, and you can always prtsc).
GD library of php will help you doing that.
You'll need to create a new image using imagecreate function but adding some more "space" to the original size. Example: if I have an image of 200x200 (which you can retrieve using gd functions too) you'll need to create a 200x220px image using that function
Fill the new image with that gray color using imagefilledrectangle function
Copy the original image into the new one using imagecopy
Set the header's content type to image/type png gif etc..
Output to the image using imagepng or any other function that has the format you want.
I've had success with JQuery Watermark:
Jquery Watermark
Does anybody know how to place an image in the webpage, but both position and clipping (maybe also resizing) are interactively done by user? I need it for my registration page, I've done some clipping and resizing from css and javascript, and it's not really solve the problem. If it's can be done by php, it will be perfect.
Here is a brief summary:
Let the user browse for and upload a
photo.
Validate the photo is of correct type
and dimensions using PHP's image
functions.
Show the user the photo in the
browser, along with a draggable DIV
that they can resize and move. This
is the cropping area.
When they click "Next", you transmit
the x,y,width,height of the DIV to
the server either by AJAX or simply
as hidden fields in a form.
Again, use the PHP image functions to
crop the image, and then resize it.
Save it to a permanent location.
Post a comment for further specific answers.
No matter what you're going to need to use either JavaScript or Flash to maintain intractability for a clientside resize of you image.
The following tutorial shows you how to use jQuery's simplified AJAX and PHP to upload an image to a temporary location, resize it, and save the resized copy where you desire.
Hope it helps!
http://www.webmotionuk.co.uk/jquery-image-upload-and-crop-for-php/
Try this class
http://www.verot.net/php_class_upload_samples.htm
All images that are being uploaded by user can be edited in anyway using php