We Keep Coding

Google images view mode example

I would like to implement a google images kind of view of images(and other details) on click.
When a image is clicked, additional data expands under it with a arrow pointing to the starting position and when an other image is selected the first one collapses and the other expands. Does something like that exists(open source) or is there only the option to implement it myself?
Screenshot of what I mean:
Thank you

Photoswipe is a great responsive javascript library.
This is a link to an example of Photoswipe.
You can add caption, customize backgrounds very similar to google image search.
Once you click on the photo Photoswipe will let you display your images on your page using standard html, css and javascript. You can add captions as you see below.
Attached Detailed Guide for Photoswipe

How would I achieve a hover effect which changes a photo in one location? Like a photo viewer?

You can see in my attached image, one of the buttons/icons has the same photo as the large picture, if I hover over the other buttons/icons the large picture should also change. This seems redundant and indeed this is not what I intend to do but shows the effect I'm trying to accomplish. The only thing I have to go on is the mouseover effect for hovering over an image which changes but how do you have the secondary image show up elsewhere other than the current picture itself?
-- update --
I want to have a photo preview where if you hover over multiple divs or images, a larger one changes to show a preview.
Is that css or javascript?
Thank you

Small sliding, loop gallery

I'm working on a website and I'd like to add a photo gallery. The gallery should work as follows:
The gallery has a rectangle/box form. I have, let's say, 10 photos. 7 of them are displayed in a gallery, the rest is hidden. By clicking buttons "left" or "right" we can move photos in the given direction and so view a photo that was hidden (and hid a photo that was on the far left or right side). The gallery should be loop, so a button won't stop moving photos when it reaches the last photo, but start viewing photos from the beginning (starting with the very first one) instead. I know HTML and CSS, but, if I'm right, CSS itself is not enough to make such gallery. I think I need some Javascript code for this, but I don't know JS. I've searched on the net for JS gallery scripts, but none of them works and looks as I'd like them to work and look.

Try bxSlider. I think it offers exactly what you need.

Pulling data-caption from image with Elastic Image Slideshow, and display it on the page

I am using the Elastic Image Slideshow script, and would like to add data-caption text for each image, then display the text of the currently shown image into a div, outside of the slideshow (basically in a different section of the page.)
I found this script, to work with jQuery cycle, and tried to modify it to work but I am not having much luck.
Ok, I found this fiddle: http://jsfiddle.net/Snfst/6/ and modified it down to this:
$('img').hover(function(){
$('#caption').html($(this).data('caption'))
});
Question now is how do I get it to load without having to hover over the image, and only show the data for the currently shown image?
The page that I'm trying to make this work on might better show what I'm trying to do:
http://diguiseppi.com/Brad/Andy/portfolio-web-design.html

jquery drag image into text and show url of that image

I have a textbox, a div, and an image.
Do we have any way to do like this:
When I drag that image into the div. (The image don't need to move, just like we left click on it, and drag it to anywhere, but it never move.)
The div show the image. (Duplicated 1 image into the div)
The text show URL of that image.
Do you have any idea or article(s) on doing this thing?
I've never coded drag drop in my life, but I know Step 2 is just set HTML for the div, and Step 3 is just get image src. However, on Step 1, how do I know when "the image into the div and the mouse release?"
I know jQuery UI, it's not the dragable from jQuery UI, cause the draggable makes object move. I don't want it move. Can you try click on any image on this stackoverflow website, or any link. Then you hold your mouse and drag it. Try drag a link into the search box at top, and you get the link. Thats what I want. Not the dragable of jQuery UI to make the object move.

You can do all of this with the dragable feature in jQuery. I noticed in a comment you mentioned that you don't believe this will work because it actually moves the image but there are more than just the default options! Take a look at the clone helper attribute.
Here's about as close of an example as there is and it sounds like you already know how to handle the rest (getting the src attribute, etc.).
http://jqueryui.com/demos/droppable/#method-option

JQuery draggable allows you to leave the original in its place while dragging through the use of Helpers. See this url and try dragging the top grey boxes around. The two on the right use helpers, leaving the original in place.
http://www.jqueryui.com/demos/draggable/#visual-feedback
Using this in conjuntion with the link Artsemis provided will do the trick
Dragging an image into your address bar is a function of the web browser, not JS or the page you are viewing. You will want to use jquery draggable or something like it.