Image Gallery

Forum Moderators: open

Message Too Old, No Replies

Image Gallery

HTML, Dreamweaver, images, photo gallery

cocnee

10:48 am on Feb 27, 2013 (gmt 0)

Good morning,
I am an aspiring photographer and trying to create several pages to show off my images.
I have been told that Apple products dont accept flash, which is okay, so I am trying to source a HTML / Javascript code and CSS to create a gallery for each page.
I have tried WOW Slider etc, but would want control over how it appears.
I would also like to create something like Mario Testino website where you mouseover a image and information about the gallery appears, then you click and go to the page.

Hope this is okay.

Thanking you in advance.

Gary

swa66

2:11 pm on Feb 27, 2013 (gmt 0)

The good news: I guess CSS can do most of it - if not all.

CSS has the :hover pseudo-class that allows you to change the CSS for wether a pointer is over the object or not.
CSS also has the ability to hide things (e.g. using display:none).

To get the click action, all you need is a anchor element <a href="http://www.example.com">...</a>

So putting it together:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <style type="text/css">
      * {
        border:0;
        margin:0;
        padding:0;
      }
      .images a {
        display: block;
        height: 200px;
        width: 300px;
        float: left;
        border: 1px solid red;
        margin: 5px;
        text-decoration: none;
      }
      .images a img {
        height: 200px;
        width: 300px;
      }
      .images a span {
        display:none;
        margin: 5px;
        font-size: 2em;
      }
      .images a:hover span {
        display: block;
      }
      .images a:hover img {
        display:none;
      }
      .images+* {
        clear: left;
      }
    </style>
  </head>
  <body>
    <p>before</p>
    <div class="images">
      <a href="page1.html">
        <img alt="foo" src="img1.png" />
        <span>explanation of first image</span>
      </a>
      <a href="page2.html">
        <img alt="bar" src="img2.png" />
        <span>explanation of first image</span>
      </a>
      <a href="page3.html">
        <img alt="foo bar" src="img3.png" />
        <span>explanation of third image</span>
      </a>
    </div>
    <p>after</p>
  </body>
</html>

I didn't test it in any other browser than chrome - left as an exercise for the reader ;-)

So what does it do? The html add the images and the explanation you want to show upon hover in a <span> inside an <a>. They all sit in a <div> that has a class to allow the CSS to only latch on to that.
It could be arguead that a list is a better choice, and I'd follow the argument in a real case in all likelihood. But for simplicity's sake I'll leave it to a div for now.

The css in there is a bit more interesting:
- First there's a reset of browser default borders, margins and paddings in order not to have to deal with them anymore.
- next the anchor elements (<a>) that are children on the div with class="images" are made a block element (they are by default inline), given a size and floated to the left. If there are enough and the window is narrow enough, they'll start a new line as needed. They are given a margin to stop them from sticking to each other and a border to make sure you see them in your tests. The text decoration is the underline of the text that we need to turn off here.
- the images inside the <a> elements are given the same size as the parent <a>
- the spans inside the <a> elemnets are styled and hidden (we'll unhide them alter) their margin makes their text not sit flush with the border of the <a> element.
- when we hover over the <a> element, we show the span (using display:block) and hide the <img> element (using: display:none)
- the last line is a "clearfix" style thing: sinze we have floated elements, anything following them would get pushed to a sade and not get pushed downward. The eastiest solution is to make the next element (*) that comes after the div with class images to have the clear property.

That's it basically. You can enhance this at will.

cocnee

3:13 pm on Feb 27, 2013 (gmt 0)

Blimey, thanks ever so much for all that information.

One last query, if I went with a normal gallery, with some thumbnails under a main image, then a bigger image within the same page when clicked, would I need to alter what you have graciously provided for me.

Thanks

cocnee

3:54 pm on Feb 27, 2013 (gmt 0)

Hello SWA66, I have changed / added some details to the CSS part, but could I trouble you in asking how would I align the red box, with the image.
The reason I ask is that the img is slightly off right to the red box.

The CSS code is detailed below.

***********************************************************<style type="text/css">

h1 { font-family:arial; font-size: 14px; font-weight:100; color: #fff }

h2 { font-family:arial; font-size: 12px; font-weight:100; color: #fff }

* { background-color: #000; border: 0px; margin-left: 5px; margin-top: 5px; padding-left: 10px; }

.images a { display: block; height: 150px; width: 250px; float: left; border: 1px solid red; margin: 5px; text-decoration: none; padding: 10px; }

.images a img { height: 150px; width: 250px; margin-left: 5px; }

.images a span { display:none; margin: 5px; font-size: 12px; padding: 10px; }

.images a:hover span { display: none; }

.images a:hover img { display:none; }

.images+* { clear: left; }

</style>

***********************************************************

Thanks

swa66

5:20 pm on Feb 27, 2013 (gmt 0)

Ouch.

I'd not add background colors, margins or padding that differ from 0 to "*" : it applies to every individual element on your page. What I gave you was a reset: to remove what the browsers have on their own.
If you want to add margins to the page itself, you can add padding to html, add background to body etc.

Your images do not fix your box anymore:
- images a has a size of 150x250 but has 10px paddding: so the content area is only 130x230 (padding sits on the inside of the dimension you gave).
- the images that go inside is are 150x250 (so they overflow), and have a margin on them as well that's not going to help.

I think you really need to look at the box model before playing with margins and padding in CSS:
- training (rather basic): [w3.org...]
- the standard (rather advanced): [w3.org...]

As to using the technique: you should be able to use it in other galleries, but it means you have to truly understand how they work as well as how this works ...

You should be able to find ready made stuff if you google "CSS gallery".

cocnee

1:00 pm on Mar 8, 2013 (gmt 0)

Good afternoon swa66.

Firstly let me thank you for all the advice.

I have 1 concern, I am trying to align the redbox under the image to the central, so the same on the right.

However despite my efforts and fruitless searching on w3.org, i cannot locate any assistance to that effect.

Apologises on a Friday, but are you able to advise how I could manage this.

***********************************************************

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta charset="UTF-8" />

<title>Test</title>

<style type="text/css">

* {
border:0;
margin:0;
padding:0;
}

.images a {
display: block;
height: 150px;
width: 250x;
float: left;
border: 1px solid red;
margin-left: 15px;
text-decoration: none;
padding-bottom: 10px;

}

.images a img {
height: 150px;
width: 250px;
}

.images a span {
display:none;
margin: 5px;
font-size: 2em;
}

.images a:hover span {
display:
block;
}

.images a:hover img {
display:none;
}

.images+* {
clear: left;
}

h1
{
color:#666; text-transform:uppercase;
font-family:Arial;
font-size:24px;
font-weight:200;
padding-left: 35px;
padding-top:30px;
}

h1 span
{
color: #999;
text-transform:uppercase;
font-family:Arial;
font-size:24px;
font-weight:200;
}

h2
{
color: #fff;
text-transform:uppercase;
font-family:Arial;
font-size:18px;
font-weight:200;
padding-left: 50px;
padding-top: 30px;
}

ol
{
padding-top: 10px;
padding-left: 30px;
}

ol li
{ float:left;
list-style:none;
}

ol li a
{
padding: 10px;
color: #666;
text-decoration:none;
font-family: Arial;
font-size:16px;
font-weight:100;
font-style:normal;
}

#socialLinks { padding-top: 1px; text-decoration:none; }

.fl { float:left;}
.fr { float:right;}

</style>
</head>

<body>

<ol>
<li><a href="#">people</a></li>
<li><a href="#">scenary</a></li>
<li><a href="#">lightpainting</a></li>
<li><a href="#">music</a></li>
<li><a href="#">insta-matic</a></li>
<li><a href="#">about</a></li>

</ol>

<div id="socialLinks" class="fr">

<a href="mailto:ghp1968@icloud.com" target="_new"><img src="images/emailButton.png" alt="Email" title="Email" border="none" /></a>
<a href="https://www.facebook.com/GaryHornePhotography" target="_new"><img src="images/fbButton.png" alt="Facebook" title="Facebook" border="none" /></a>
<a href="https://twitter.com/ghp1968" target="_new"><img src="images/twitterButton.png" alt="Twitter" title="Twitter" border="none" /></a>

</div>

<h1> Gary Horne <span>Photography</span></h1>
<h2> Welcome </h2>

<div class="images">

<a href="page1.html">
<img alt="foo" title="foo bar" src="images/lightpainting/lp2.jpg" />
<span>explanation of first image</span>
</a>

<a href="page2.html">
<img alt="bar" title="foo bar" src="images/portraits/Kate v2.jpg" />
<span>explanation of first image</span>
</a>

<a href="page3.html">
<img alt="foo bar" title="foo bar" src="images/portraits/journey v1.jpg" />
<span>explanation of third image</span>
</a>

<a href="page4.html">
<img alt="foo bar" title="foo bar" src="images/lightpainting/lp9.jpg" />
<span>explanation of third image</span>
</a>

<a href="page1.html">
<img alt="foo" title="foo bar" src="images/lightpainting/lp2.jpg" />
<span>explanation of first image</span>
</a>

<a href="page2.html">
<img alt="bar" title="foo bar" src="images/portraits/Kate v2.jpg" />
<span>explanation of first image</span>
</a>

<a href="page3.html">
<img alt="foo bar" title="foo bar" src="images/portraits/journey v1.jpg" />
<span>explanation of third image</span>
</a>

<a href="page4.html">
<img alt="foo bar" title="foo bar" src="images/lightpainting/lp9.jpg" />
<span>explanation of third image</span>
</a>

<a href="page1.html">
<img alt="foo" title="foo bar" src="images/lightpainting/lp2.jpg" />
<span>explanation of first image</span>
</a>

<a href="page2.html">
<img alt="bar" title="foo bar" src="images/portraits/Kate v2.jpg" />
<span>explanation of first image</span>
</a>

<a href="page3.html">
<img alt="foo bar" title="foo bar" src="images/portraits/journey v1.jpg" />
<span>explanation of third image</span>
</a>

<a href="page4.html">
<img alt="foo bar" title="foo bar" src="images/lightpainting/lp9.jpg" />
<span>explanation of third image</span>
</a>

</div>

</body>
</html>
***********************************************************

Thanking you in advance

Image Gallery

HTML, Dreamweaver, images, photo gallery

cocnee

swa66

cocnee

cocnee

swa66

cocnee

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week