Image Gallery (HTML / CSS) [closed]

Question

Image Gallery (HTML / CSS) [closed]

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

Good morning, I'm starting in web programming and I need a north ... I want to make a gallery with timthumb where several images appear after clicking on some, it opens in full screen and follow with a simple slider so that the user can go forward the images. Thank you.

html css

asked by anonymous 01.07.2016 / 15:24

2 answers

1

Dude, there's a lot of HTML / CSS template ready, it's only up to you to implement the php of your page. Here is an example:

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

Galeria 2 https://templated.co/visualize

There it is, it started too! ;)

01.07.2016 / 15:31

1: N Fluent API Mapping Cascade How to escape a key / keys in Blade?

score 3 · Accepted Answer

Lightbox (jQuery)

link

I think the Lightbox script is right for your question.

Download here and unzip to your computer.

Using Lightbox

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

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

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

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

</body>
</html>

Initialize with HTML

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

For the value of the attribute, 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 a data-title attribute if you want to display a caption.

If you have a set of related images that you would like to combine into one set, use the same value of the data-lightbox attribute 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>

Example online

/* 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><!--Parachamarseuarquivolightbox-plus-jquery.min.jsdiretodeseudiretórioretireocomentáriodatagscriptabaixo--><!--<scriptsrc="../dist/js/lightbox-plus-jquery.min.js"></script> -->


</body>
</html>

I hope I have helped.