Autor Zpráva
Johny897
Profil
Ahoj, potřeboval bych na stránky udělat fotogalerii, ve které bude hodně fotek. Ideálni představa je taková, že bych fotky nahrál do složky, do kódu stránky vložil odkaz na nějaký script nebo tak něco, co by zobrazilo miniatury (třeba z druhé složky) a potom se to dalo zobrazit přes lightbox. De o to, abych do kódu stránky nemusel psát odkazy na každou fotku ručně. Předpokládám že PHP se asi nevyhnu, (kdyby jo bylo by to fajn), ale protože tomu vůbec nerozumím, potřeboval bych nějaké hotové FREE řešení. Díky za každou radu
MyShare
Profil
Nazdar hádam som sa trafil
Overlay

ak áno tu je kód
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<style>
  /* some styling for triggers */
  #triggers {
  text-align:center;
  }

  #triggers img {
  cursor:pointer;
  margin:0 5px;
  background-color:#fff;
  border:1px solid #ccc;
  padding:2px;

  -moz-border-radius:4px;
  -webkit-border-radius:4px;

  }

    /* styling for elements inside overlay */
  .details {
  position:absolute;
  top:15px;
  right:15px;
  font-size:11px;
  color:#fff;
  width:150px;
  }

  .details h3 {
  color:#aba;
  font-size:15px;
  }
  </style>
</head>
<body>
<div id="triggers">
  <img src="zlozka/miniatura.jpg" rel="#miniatura1"/>
  <img src="zlozka/miniatura.png" rel="#miniatura2"/>
  <img src="zlozka/miniatura.jpg" rel="#miniatura3"/>
  atď...
</div>

<!-- overlays -->
<div class="simple_overlay" id="miniatura1">
  <img src="zlozka/velky-obrazok.jpg" />

  <div class="details">
    <h3>The Barcelona Pavilion</h3>
    <h4>Barcelona, Spain</h4>
    <p>
      The Barcelona Pavilion, designed by Ludwig Mies van der Rohe,
      was the German Pavilion for the 1929 International Exposition in
      Barcelona, Spain. It was an important building in the history of
      modern architecture.
    </p>
    <p>
      Several critics, historians and modernists have declared it "the
      most beautiful building of the century"
    </p>
  </div>
</div>

<div class="simple_overlay" id="miniatura2">
  <img src="zlozka/velky-obrazok.jpg" />

  <div class="details">
    <h3>The Barcelona Pavilion</h3>
    <h4>Barcelona, Spain</h4>
    <p>
      The Barcelona Pavilion, designed by Ludwig Mies van der Rohe,
      was the German Pavilion for the 1929 International Exposition in
      Barcelona, Spain. It was an important building in the history of
      modern architecture.
    </p>
    <p>
      Several critics, historians and modernists have declared it "the
      most beautiful building of the century"
    </p>
  </div>
</div>

<div class="simple_overlay" id="miniatura3">
  <img src="zlozka/velky-obrazok.jpg" />

  <div class="details">
    <h3>The Barcelona Pavilion</h3>
    <h4>Barcelona, Spain</h4>
    <p>
      The Barcelona Pavilion, designed by Ludwig Mies van der Rohe,
      was the German Pavilion for the 1929 International Exposition in
      Barcelona, Spain. It was an important building in the history of
      modern architecture.
    </p>
    <p>
      Several critics, historians and modernists have declared it "the
      most beautiful building of the century"
    </p>
  </div>
</div>

atď..

<script>
  $(document).ready(function() {
      $("img[rel]").overlay();
    });
</script>
</body>
</html>
a CSS style.css
/* the overlayed element */
.simple_overlay {

    /* must be initially hidden */
    display:none;

    /* place overlay on top of other elements */
    z-index:10000;

    /* styling */
    background-color:#333;

    width:675px;
    min-height:200px;
    border:1px solid #666;

    /* CSS3 styling for latest browsers */
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;
}

/* close button positioned on upper right corner */
.simple_overlay .close {
    background-image:url(http://jquerytools.org/media/img/overlay/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}
Johny897
Profil
Spíš ne, potřebuju něco, co automaticky zobrazí všechny fotky ze složky, a nebudu msuet do kódu ručně psát odkaz na každou zvlášt
Petr_D
Profil
<?php
$nazev_slozky="images";
$slozka=opendir($nazev_slozky);
if($slozka==false) die;
  while($soubor=readdir($slozka))
  {
    if($soubor==".." || $soubor==".") continue;
    if(eregi("nahled_", $soubor)) continue;
    if(eregi("jpg", $soubor))
    {
      $obrazky[]=$soubor;
    }
  }
  closedir($slozka);
  $pocet_obrazku=count($obrazky);
  @sort($obrazky);
  $i=0;
  for($i; $i<$pocet_obrazku; ++$i)
  {
    list($sirka, $vyska)=getimagesize($nazev_slozky."/".$obrazky[$i]);
    $nova_sirka=196;
    $nova_vyska=147;
    $blank=imagecreatetruecolor($nova_sirka, $nova_vyska);
    $zdroj=imagecreatefromjpeg($nazev_slozky."/".$obrazky[$i]);
    imagecopyresampled($blank, $zdroj, 0, 0, 0, 0, $nova_sirka, $nova_vyska, $sirka, $vyska);
    imagejpeg($blank, $nazev_slozky."/nahled_".$obrazky[$i], 100);
    echo "<a href=\"".$nazev_slozky."/".$obrazky[$i]."\" rel=\"lightbox[node_images]\"><img src=\"".$nazev_slozky."/nahled_".$obrazky[$i]."\" alt=\"".$obrazky[$i]."\" ></a>&nbsp;\n";
  }
                                                                                                                                                    ?>
Johny897
Profil
To vypadá pěkně, díky. Jak to tam mám dostat? Stačí to napsat a začátek kódu stránky?
ts_istudio
Profil
Johny897:
Výše uvedené vypíše patřičný počet <a href><img></a>. Kam to na stránce vložíš, tam to bude. Nezapomeň stránce nastavit příponu php místo html a nahrát to někam, kde php běží.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: