I am making my own photo album, and want to copy the functionality of a well known photo sharing site. What I am looking for is - how do they do this?
http://www.flickr.com/photos/cdotlister/6445556533/in/photostream/
That's a photo of mine. If you click the photo, you get an enlarged version. The initial one and the large one are the same file size, so, must be the same file. I think the smaller one is resized using html. (image height and width). And then the popup version is probably the actaul image size.
However, when the image is popped up - resize your window. It stays centred.
I'd like to replicate this... I assume it'd ajax? I'd like to know how I can have a click event on the image, display a popped up version of the same image.
Take a look at jQuery lightbox pluggin.
http://leandrovieira.com/projects/jquery/lightbox/
Related
I am making a Project in which when someone opens it so the images should give them a blurr preview and after its fully loaded then show the iamge to user. For example - On Instagram, when we open the app it shows us the blurred image and after its loaded fully it shows us the clear image.
How to Implement that same feature using javascript or jquery?
You need to have a really low quality version of the image in your database (or if you embed it directly -> in your assets). Then you can load the smaller image and blur it using CSS blur().
When the fully sized image is loaded, you can hide the small image. To get some ideas on how to check for that, I found this stackoverflow thread: How to create a JavaScript callback for knowing when an image is loaded?
How does the above answer have a Green Tick but the link that is shared so not have. This does not look right to me and I am confused.
I am building a site that has a small preview image of a map at 281 x 348. I wanted to make a way to click the image to see it full size, which would be very zoomed in, at the original image size which 1066 x 1600. However, I wanted to get fancy and make the image pop up within the same window, dimming the page behind it.
So I got Lightbox 2 to fully work, and the image displays as a popup, but it is pretty small. I want to have it large and, what I'm assuming is the best option, is to be able to scroll up and down the image.
How should I go about doing this? Every code for Lightbox including the jquery I got directly from here.
I haven't tested in Lightbox2, but it looks like in lightbox.js there is an option named this.fitImagesInViewport. Try setting that value to false and see if it gets the result you're looking for.
Edit: I ran a quick test, and it looks like that should do it. You can take a look at the source for lightbox.js here, so hopefully the change in your code should be fairly trivial.
I'm creating a photo gallery website, and there are pages for browsing the photos, with a listing of thumbnails (yes just a regular photo site). The problem is that, I want thumbnails to fill up the available space (I know how to get that one). Actually, what I want to achieve is very similar to this: imagine you have a big number of (more than the screen area allows) thumbnails, and you have set overflow-y to hidden. The thumbs just fill up the space and it goes, off the screen. This would be what I wanted to have if the thumbs in the bottom didn't go off the screen. I need something more, let's say, "dynamic". I've got jQuery, but haven't been able to model the desired effect in my mind.
You should load the images dynamically as needed to improve performance. See the "Reduce the Number of DOM Elements" section in the Yahoo! Best Practices for Speeding Up Your Web Site. Use jQuery to check the size of the div in which you are rendering the images. Load just enough images to fill the div and then load more images on the fly as needed (on window resize or scroll). It is not clear to me exactly what you want to achieve so I can't be more specific than that.
Ok found the way into it anyway. I just load a big number of thumbs, set the overflow-y of the thumbs container to hidden, and by Javascript (actually jQuery), when I resize the window check if the thumbs top + height exceeds window's height. if it does, I simply hide that thumb, if it doesn't I simply show it. It works great!
I'm searching a javascript that can resize images similar to script thats available as a plugin in vBulletin CMS:
I want the script to be used in blogger blog so that all images i upload into a post are resized to a smaller res and on clicking the image should be displayed in original dimensions
Something of the sort getelementbyID("img").
are there any script providing this feature? Pls help me out
Thanks in advance.
Something like a lightbox, perhaps?
I know the specific interaction you're asking about, and personally, I've always found it really obnoxious.
If you don't want to use a server side script to automatically create a smaller version of the image that you would link to the larger version, I wouldn't recommend using JavaScript to resize an image either. I'd recommend setting the image's dimensions in CSS and then attaching a click handler with JS that showed the image in some sort of overlay (or just using HTML to link to the larger image file).
I was just wondering what is the best image uploader with a gallery and ordering abilities. What I had in mind was a back-end page that has thumbnail images to the left, and an image upload panel to the right. When an image gets uploaded, the thumbnails in the left gets updated. I also need a delete function on all of the thumbnails; maybe when they hover over an image, an "x" could appear, which when clicked, will delete the image. I'll also need dragging capabilities so that the user can rearrange the ordering of the images.
I was hoping for all this to be using javascript and ajax. I think it should be possible because I can find each piece from separate plugins, but I want one that encapsulates all of them together.
you have to use Uploadify from http://www.uploadify.com/demos/
and customize it as u need.
there is no prebuilt solution for your case.