| Autor | Zpráva | ||
|---|---|---|---|
| Johny897 Profil |
#1 · Zasláno: 12. 5. 2013, 18:34:20
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>/* 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 |
#3 · Zasláno: 13. 5. 2013, 16:03:14
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 |
#4 · Zasláno: 13. 5. 2013, 18:54:24
<?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> \n";
}
?> |
||
| Johny897 Profil |
#5 · Zasláno: 15. 5. 2013, 08:03:20
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 |
#6 · Zasláno: 15. 5. 2013, 09:07:24
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ěží. |
||
|
Časová prodleva: 11 let
|
|||
0