Awesome photo gallery code for your website!

  • 2
  • Idea
  • Updated 4 years ago
  • Not Planned
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members.

Hi everyone! If you have been looking for a photo gallery like the Google Images one, you can! Ok, first, drag and drop an HTML widget into your page you want to have photos on.

Then, paste this code in:


<!--

<style type="text/css">

/*CSS for photo gallery*/

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}

</style>

-->


Warning: Do not copy <!-- or --> Just copy the code in between those.

Now, after that code, paste this in:


<!--

<div class="hovergallery">
<img src="resources/IMAGE-NAME.JPG" />
<img src="resources/IMAGE-NAME.JPG" />
<img src="resources/IMAGE-NAME.JPG" />
<img src="resources/IMAGE-NAME.JPG" />
<img src="resources/IMAGE-NAME.JPG" />
<img src="resources/IMAGE-NAME.JPG" />
</div>

-->


Warning: Do not copy <!-- or --> Just copy the code in between those.

Remember to replace "IMAGE-NAME.JPG" with the image name in your File Manager.
(Also remember if you put the picture in another folder in the File Manager, make sure to include it, EX: pictures/image.jpg)

Now, that's it! You now have a photo gallery like Google Images! EX page: Photo Gallery Test Page

Hope this helps out people that wanted this code!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
  • happy

Posted 9 years ago

  • 2
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
If there is any problem, just post it here.
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Nathan,

Thank you for sharing this code in the forum. We gladly welcome this suggestion and believe your fellow Yola community will want to give this a try. I did notice on your test page, where you said 'click here' there wasn't a link enabled to click on.

Thanks again for sharing, Nathan. Cheers!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks for finding that error! I will go fix that right now! :)
Photo of Margie

Margie

  • 286 Posts
  • 25 Reply Likes
Thanks, Nathan. Nice job adding it to the test site for all of us to see.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem. Doesn't it look similar to Google Images? Also, this doesn't even use any JavaScript! It's all CSS and HTML!
Photo of rsfreire.mail

rsfreire.mail

  • 1 Post
  • 0 Reply Likes
wonderful!! thanks!
but.... any idea how to make it work in IE?

(ps: I hate IE...)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, the reason why it wont work in IE is because it uses CSS3. So it only works in all CSS3 browsers. (I HATE IE too!!) But good news: When everyone makes the switch to IE 9 and when it goes out of beta, then it will work because IE 9 has CSS3 in it!
Photo of safi ullah

safi ullah

  • 63 Posts
  • 1 Reply Like
its not working on my site
Photo of Strum T Strummer

Strum T Strummer

  • 7 Posts
  • 0 Reply Likes
Did that but there is nothing there? Blank. All I get is the EDIT function in the HTML Widget???
Thanks for any feedback. :O)
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hello everyone

The user who has so graciously shared this code is currently offline. It will be helpful if you could please share your page URL where you've tried to set this up. We will try our best to assist.
Photo of Strum T Strummer

Strum T Strummer

  • 7 Posts
  • 0 Reply Likes
Thanks Sanja. Here's the link but there's nothing there?

http://strumsportraits.yolasite.com/p...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Strum! I actually see it on your page. But you need to put in your own images. Right now those images aren't in your file manager. If you need any assistance with your file manager let me know.

Sincerely,
Nathan
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Yeah, it's trying to look for images that don't exist
Photo of Strum T Strummer

Strum T Strummer

  • 7 Posts
  • 0 Reply Likes
Thanks for the feedback folks. I saw the little red x boxes on a friends pc yesterday , yes no images but I use firefox and I don't see them. Is this a problem with FF browser?
Also what path should i use in file manager for the images. I havn't created any new folders so all images are in the default folder.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Strum, the path that you use is resources/IMAGE.jpg but remember to change "IMAGE.jpg" to the actual image name.

Hope this helps!

Nathan
Photo of Strum T Strummer

Strum T Strummer

  • 7 Posts
  • 0 Reply Likes
Thanks for that Nathan. Cheers! :O)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
You're welcome! :)
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Hey everyone! Add this bit of code to your site:
go to http://prevpic.yolasite.com/imbu.php
and do step 1 and 2, but not 3.
then turn these image tags:

<img src="resources/IMAGE-NAME.JPG" />

into this:

<img src="resources/IMAGE-NAME.JPG" alt="Title text" onclick="openprev(this);" class="prevpicpic" />

to open it in a lightbox!
Here is a example!:http://kevinscodeexamples.yolasite.co...
click the images!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Nice job Kevin! That looks neat :)
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Thanks!
Photo of mark ellis

mark ellis

  • 9 Posts
  • 0 Reply Likes
This is exactly what i need, unfortunately I just can't get any joy, just blue boxes I'm on Safari 5, and 4. http://www.markellisfotografia.com/te...#
Please any help would be awsome. Thanks guys, Mark
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello Mark

I see the problem... The path to the image is wrong. If you upload an image to your site's file manager, you can link to it in the img tags, by using the following format inside the src="" tag. (Just look at the bold part, not the src part because the src part is already in the code.)

src="resources/IMAGE.JPG"

Just change "IMAGE.JPG" to the actual image name in your file manager.

If you need any help with this, please let me know.

I hope this helps!

Nathan
Photo of mark ellis

mark ellis

  • 9 Posts
  • 0 Reply Likes
wow that was quick, thanks man i'll give it a go now and let you know, mark
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah I get emails right when someone replies, and it pops up on my screen saying I have a new email and I click it and then I click "Go look at this reply" in the email notification. Email Notifications are awesome! My replies wouldn't be nearly this fast if it wasn't for these nice Email Notifications!

I hope that my suggestion works!

Nathan
Photo of mark ellis

mark ellis

  • 9 Posts
  • 0 Reply Likes
still nothing that all seemd to be correct:


Title text

link to image: http://sitebuilder.yola.com/V0020427/...#
arhhhh blue boxes!!!
by the way this is my first attempt at working with code (feeling dumb)

Mark
Photo of mark ellis

mark ellis

  • 9 Posts
  • 0 Reply Likes
the only thing i change is: IMAGE.JPG to BugSML.jpg hmmmmmm?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Mark

You have to put in this:

resources/BugSML.jpg

Also, what do you mean by "stretches" Do you have your site published so I can see what you mean? Do you mean the image is too big?

Nathan
Photo of mark ellis

mark ellis

  • 9 Posts
  • 0 Reply Likes
Ok, getting somewhere now !!! I put the full link in (http://sitebuilder.yola.com/V..........) didn't work, so I then reverted to resources/Bugsml.jpg with "" and i now have an image which expands!!!!
Now the only problem is it's stretched!? markellisfotografia.com./test
Any ideas welcome, thanks people,
Mark
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Mark

You have to put in this:

resources/BugSML.jpg

Also, what do you mean by "stretches" Do you have your site published so I can see what you mean? Do you mean the image is too big?

Nathan
Photo of mark ellis

mark ellis

  • 9 Posts
  • 0 Reply Likes
Thanks Nathan, markellisfotografia.com/test.php#
You'll soon see what i mean!
Mark
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I see that and it doesn't work when I hover over it. What browser do you have? Did you see my test page? My test page for this nice CSS3 feature is: Photo Gallery Test Page

Sincerely,
Nathan
Photo of mark ellis

mark ellis

  • 9 Posts
  • 0 Reply Likes
mmmmmm sorry Nathan i'm actually trying this:
http://prevpic.yolasite.com/imbu.php
i'm on Safari 5
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Oh, I see. Yeah it works now! But it still doesn't get bigger when you hover, and don't you want that + the Lightbox that pops up?

Nathan
Photo of mark ellis

mark ellis

  • 9 Posts
  • 0 Reply Likes
weird the light box works on mine? do you think i should stick with the flicker lightbox? markellisfotografia.com/portfolio
I't's just that it's small, is there anyway of making that any larger?

Thanks again,
Mark.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Mark, the lightbox does work for me. But that CSS3 hover effect that this topic is about isn't on the image.
Photo of mark ellis

mark ellis

  • 9 Posts
  • 0 Reply Likes
oops you are right, i was following a link from this page. i'm now trying again this one which woud trully be cool, fingers crossed,

Cheers,

Mark.
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Is there anyway to add links to these images to external web pages? (Eg Facebook)
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Easy! Wrap the img tag around an a tag, like this:

<!--
<div id="hovergallery">
<a href="yoururl"><img src="resources/IMAGE-NAME.JPG" /></a>
<div>
-->
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Brandon

Yes, you can link an image to a website. To do this just replace this:


<!--

<style type="text/css">

/*CSS for photo gallery*/

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}

</style>

<div class="hovergallery">
<img src="resources/IMAGE-NAME.JPG" />
<img src="resources/IMAGE-NAME.JPG" />
<img src="resources/IMAGE-NAME.JPG" />
<img src="resources/IMAGE-NAME.JPG" />
<img src="resources/IMAGE-NAME.JPG" />
<img src="resources/IMAGE-NAME.JPG" />
</div>

-->


With this:


<!--

<style type="text/css">

/*CSS for photo gallery*/

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
width:200px;
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}

</style>

<div class="hovergallery">

<a href="http://google.com/">&lt;img src="resources/IMAGE-NAME.JPG" /></a>

<a href="http://facebook.com/">&lt;img src="resources/IMAGE-NAME.JPG" /></a>

<a href="http://twitter.com/">&lt;img src="resources/IMAGE-NAME.JPG" /></a>

<a href="http://yahoo.com/">&lt;img src="resources/IMAGE-NAME.JPG" /></a>

<a href="http://yola.com/">&lt;img src="resources/IMAGE-NAME.JPG" /></a>

<a href="http://apple.com/">&lt;img src="resources/IMAGE-NAME.JPG" /></a>

</div>

-->


Just change the "href" value to the actual website URL that you want the image to go to when clicked. I added in websites so you can see examples. Make sure if you are linking to an external site that you put http:// in front of the URL (unless its already there)

And thats it!

Note: Remove the <!-- and --> in the codes for it to work.

Another Note: You'll need to change the name of the image in the "src" for it to work.

Here is an example page: http://tester3.yolasite.com/grow-gall...

I hope this helps!

Nathan
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Thanks! That's great.
Photo of hpm

hpm

  • 1 Post
  • 0 Reply Likes
cant open the test page :/
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi hpm

Nathan posted his comment about one year ago, so his link is not up to date any more. Hopefully he will be able to reply to you on this thread.
Photo of Girish Boddu

Girish Boddu

  • 2 Posts
  • 0 Reply Likes
can you guys help me out...
i want to rescale the size between the two images..
please help me
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Girish,

What do you mean "... rescale  the size between the two images.." ?
Photo of Girish Boddu

Girish Boddu

  • 2 Posts
  • 0 Reply Likes
i mean ,,
the space between the two images wanna reduce it and 
get it in horizontal direction please help
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The images naturally tile in the horizontal. The number of images across depends on the physical size of the images and the space allowed on your page for placement. So the smaller you make the originals the more will fit across. Once the number becomes greater than the allowed width then they wrap around to the next horizontal layer.

You can adjust the marginal space between the images horizontally and vertically within the code above.

You need to define the images size, the width of your page and the preferred margins between the images.

With a gallery it is best to prepare your images to be the same size and of their final dimension. This makes the final preparation the easiest to assemble.

Here is the link to the original code as published for this CSS3 Hover Image Gallery
Photo of Parham Beyhaghi

Parham Beyhaghi

  • 3 Posts
  • 0 Reply Likes
in google chrome when a pic is big, Small photos are placed on it. Can you fix it?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I am not sure what  you mean?

Chrome won't be altering the image size but rather the image facility that you are using on your site.

Are you using the code above or something else?
Photo of Parham Beyhaghi

Parham Beyhaghi

  • 3 Posts
  • 0 Reply Likes
yes , for example in this link :
my site
In left green bar , lower small pics is above upper big pic.
(Edited)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Parham,

I understand. 

The "zoomed" image enlarges but it won't overlay another image in the series. It seems as if all primary images have the right of their real estate and it won't be masked by another "zoomed" image.

For a way around this I can think of 2 solutions:

  • Increase the margin setting in the code for the top of each image so that a zoomed image doesn't encroach on the space of an original in the series. 
    margin: 0 10px 5px 0; /*margin between images*/ 
or
  • Reduce the scale factor in the code so that it's zoom won't encroach.
Photo of Parham Beyhaghi

Parham Beyhaghi

  • 3 Posts
  • 0 Reply Likes
Tnx for your help.
Photo of Chris Slow

Chris Slow

  • 1 Post
  • 1 Reply Like
Thanks to Nathan for posting this code. I know it has been here a while but I only found it today and have been able to create a nice looking Portfolio page. Cheers.

http://www.challenge-photographic.co.uk/Portfolio.html here's the link if you want to see it.
Photo of Laura Thomas

Laura Thomas

  • 4536 Posts
  • 211 Reply Likes
Very nice!
Photo of Christian Abordo

Christian Abordo

  • 1 Post
  • 0 Reply Likes
how to resize the pictures?
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hello Christian, 

We're sorry that we missed this question. You can resize your picture in a couple of ways. 

1. After adding the picture to your page, click on it and drag the red resize handle to enlarge or shrink your picture. 

2. Use Aviary, our integrated picture editing program. You can find details on how to use this program here: Editing pictures.

We hope that helps. Please let us know if you have any further trouble with this. 
Photo of rahul sharma

rahul sharma

  • 1 Post
  • 0 Reply Likes
Thanks for this great code details.

New Year