Image gallery (HTML/CSS)

Question

Image gallery (HTML/CSS)

Asked 8 years ago

Viewed 16,125 times

1

Good morning, I’m starting on web programming and I need a north... I want to make a gallery with Timthumb where several images appear after clicking on one, it open in full screen and follow with a simple slider so that the user can advance the images. Thank you.

1

You can start by seeing some plugins that make it easier. EX: http://fancybox.net/

– Miguel

2016/07/01 at 13:26
Thanks Miguel, that fancybox Image gallery is just what I was looking for, I’ll try to implement

– Ricardo Feller

2016/07/01 at 13:34
Maybe this one help.

– Oralista de Sistemas

2017/07/21 at 16:13

2 answers

3

Lightbox (jQuery)

http://lokeshdhakar.com/projects/lightbox2/

I think the Lightbox script serves exactly for your question.

Download here and unpack on your computer.

How to use Lightbox

Include CSS at the top of your page in your tag <head>:

<head>
  <meta charset="utf-8">
  <title>Lightbox Example</title>
  <link rel="stylesheet" href="../dist/css/lightbox.min.css">
</head>
...

Include Javascript at the bottom of your page before closing the tag </body>:

...
  <script src="../dist/js/lightbox-plus-jquery.min.js"></script>

</body>
</html>

Initialize with HTML

Add an attribute data-lightbox to any image link to enable Lightbox.

For the attribute value, use a unique name for each image. For example:

<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

Optional: Add an attribute data-title if you want to show a caption.

If you have a set of related images that you would like to match into a set, use the same attribute value data-lightbox for all images. For example:

<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a> <a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a> <a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

Online example

/* Preload images */
body:after {
  content: url(https://raw.githubusercontent.com/lokesh/lightbox2/master/dist/images/close.png) url(https://raw.githubusercontent.com/lokesh/lightbox2/master/dist/images/loading.gif) url(https://raw.githubusercontent.com/lokesh/lightbox2/master/dist/images/prev.png) url(https://raw.githubusercontent.com/lokesh/lightbox2/master/dist/images/next.png);
  display: none;
}

body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  border-radius: 3px;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-container {
  padding: 4px;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(https://raw.githubusercontent.com/lokesh/lightbox2/master/dist/images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(https://raw.githubusercontent.com/lokesh/lightbox2/master/dist/images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(https://raw.githubusercontent.com/lokesh/lightbox2/master/dist/images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(https://raw.githubusercontent.com/lokesh/lightbox2/master/dist/images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <title>Lightbox Example</title>

<!-- Estou chamando o arquivo lightbox.css direto do trecho de código CSS postado acima -->

<!-- Para chamar seu arquivo lightbox.css direto de seu diretório retire o comentário da tag link abaixo -->

<!-- <link rel="stylesheet" href="../dist/css/lightbox.css"> -->

</head>
<body>

  <section>
    <h3>Duas imagens individuais</h3>
    <div>
      <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-1.jpg" alt="image-1" /></a>
      <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-2.jpg" data-lightbox="example-2" data-title="Optional caption."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-2.jpg" alt="image-1"/></a>
    </div>

    <hr />

    <h3>Um conjunto de 4 imagens</h3>
    <div>
      <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/></a>
      <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
      <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
      <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>
    </div>
  </section>

  <section>
    <p>
      Para mais informações, visite <a href="http://lokeshdhakar.com/projects/lightbox2/">http://lokeshdhakar.com/projects/lightbox2/</a>
    </p>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox-plus-jquery.min.js"></script>

<!-- Para chamar seu arquivo lightbox-plus-jquery.min.js direto de seu diretório retire o comentário da tag script abaixo -->

<!-- <script src="../dist/js/lightbox-plus-jquery.min.js"></script> -->


</body>
</html>

I hope I’ve helped.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Julio Cesar da Silva Barros • **455** points · Answer 1 · 2016-07-01T13:31:24+00:00

Dude, there’s a lot of HTML/CSS template ready, it only takes you to implode your page’s php. Here’s an example:

Galeria 1 http://www.free-css.com/free-css-templates/page2/photobusiness

Galeria 2 https://templated.co/visualize

Follow me, I’m getting started too! ;)