| Autor | Zpráva | ||
|---|---|---|---|
| CFKarca Profil |
#1 · Zasláno: 8. 8. 2013, 00:48:23
Zdravím,
dokončuji web a poslední a zřejmě i jednou z těch důležitějších složek jsou fotogalerie. Pro mě trošku zádrhel. Na některých stránkách mám galerie o 4 fotkách, zde jsem použila lightbox. Vyhovuje mi a jelikož nahrání 4 fotek "ručně" je snesitelné, více sem to neřešila. Ale k věci.... další galerie budou rozsáhlejšího charakteru a zřejmě se budou průběžně doplňovat novými fotografiemi. Samozřejmě bych se mohla piplat s nahráváním jednotlivých fotek pomocí HTML kódu a přepisováním názvů a tak dále a tak dále.. Jenže na to jsem moc zhnilá a příjde mi to nepraktické a tak jsem se rozhodla rozšířit si opět rozhledy v dalších programovacích, scriptovacích a jiných jazycích (ovládám HTML, CSS, co se týče JS a PHP mám zběžný přehled, ale sama si nic nenapíšu..). Druhý den pročesávám net a zatím nic moc kloudného nenacházím. Moje představa: Kvůli využití lightboxu, bych ráda zachovala jeho grafický i fční styl nebo alespoň obdobu. Co se týče vytvoření miniatur, to si klidně udělám "růčo" v PS, ale nebráním se šikovným vychytávkám - podmínka stejně vysoké miniatury, nejlépe 100px na výšku. Funkce jako v lightboxu - vpřed, zpět, zavřít, případný komentář(nemusí být) a stejně i typově = rozsáhlá galerie miniatur při kliknutí se fotka otevře "nad" stránkou a je možnost pohybu(vpřed,zpět) a zavření. Jádro pudla je zmíněné nahrávání - chtěla bych, aby se dalo do určené složky přes FTP nahrát fotky - samozřejmě velikostně upravené a na stránce se automaticky načetly do galerie. Zároveň to, ale musí být uděláno tak, aby se mi to načítalo normálně ve stránce(interně v HTML potažmo XHTML kódu). Pěkných externích freeware galerií jsem našla tucty, ale to nechci. Pokud jsou tedy moje požadavky realizovatelné a byl by mi někdo nápomocen - klidně i odkazem na nějaký "tutoriál", angličtina nevadí - budu velice ráda. Pokud jsem ale moc náročná a je to možné pouze s výborným ovládáním PHP a databází, pak mám zřejmě co dohánět a du strávit hodiny na zapisování <a href="".......... Díky moc za jakoukoliv radu. Snad je to srozumitelné :D :) |
||
| Alphard Profil |
#2 · Zasláno: 8. 8. 2013, 00:56:34
Také zdravím,
pro inspiraci odkáži Jokerovu minigalerii, ale dotaz chápu tak, že se snažíte o vlastní řešení. Lightbox velmi usnadňuje procházení obrázků, stačí obsah adresáře vypsat na jednu hromadu. Na to se hodí funkce pro procházení adresáře, nejlepší bude zřejmě glob(). První manuálový příklad by mělo být relativně snadné upravit tak, aby se další práce chopil lightbox, stačí takhle? |
||
| CFKarca Profil |
#3 · Zasláno: 8. 8. 2013, 01:37:46
Alphard:
Tak tak, nemusí to být vyloženě moje - pro upřesnění odkaz na mě vyplázl jakousi zmatenou stránku a pokud kliknu na obrázek otevře se jako při obyčejném HTML: <a href="obr1.jpg"><img src="obr1.jpg"></a>. No, právě. V podstatě se spokojím s lightboxem, který bude čerpat ze složky na FTP a automaticky se aktualizovat při nahrání nových fotografií. Teď už se ale ztrácím... To co jste popsal - musím vložit externě do php souboru a následně do HTML vložit nějaké "propojení"? Jak k tomu chudáček lightbox příjde, že chci aby pracoval se soubory v nějaké složce..? Jsem v tvoření s PHP a JS opravdu dosti pozadu. Takže podrobnějšího návodu - klidně pro blbce nepohrdnu. :) |
||
| _es Profil |
#4 · Zasláno: 8. 8. 2013, 01:52:06
CFKarca:
„Jak k tomu chudáček lightbox příjde, že chci aby pracoval se soubory v nějaké složce..? Jsem v tvoření s PHP a JS opravdu dosti pozadu.“ Lightbox nemá nič spoločné s PHP. Je to len iné zobrazenie obrázkov pomocou JS kódu, riešilo sa to nedávno v lightbox v php kode. |
||
| Alphard Profil |
#5 · Zasláno: 8. 8. 2013, 02:04:59
V základu je to velmi jednoduché. Právě proto, že to zde řešíme každý týden, sem hodím stručnou ukázku.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/libs/fancybox/jquery.fancybox.pack.js"></script>
<link type="text/css" rel="stylesheet" href="/libs/fancybox/jquery.fancybox.css"></script>
<script>
$(function(){
$('a.photo').fancybox();
});
</script>
<?php
foreach (glob('../img/*.jpg') as $image)
{
echo "<a href=\"$image\" class=\"photo\" rel=\"q42\"><img src=\"$image\" style=\"height:100px\"></a>";
}
?>Při rozšiřování je potřeba pohlídat si hlavně cesty. Adresa aktuálního adresáře se bude zřejmě brát z $_GET. Miniatury by měly být opravdu miniatury, ne to jen zmenšit v css :-)
|
||
| CFKarca Profil |
#6 · Zasláno: 8. 8. 2013, 11:43:35
_es:
To vím, že lightbox není PHP.. jak jsem psala s lightboxem zkušenosti mám, ale nevím jak navázat případný kontakt k PHP souboru, který mi bude čerpat z dané složky. Alphard Jesi se to řeší každý týden, to se omlouvám googlila jsem a nenašla nikde adekvátní odpověď. :) Jestli nevadí trošku to rozeberu.. :) Začátek mi je jasnej, stáhnu fancy box, nahraju na FTP a do hlavičky (x)HTML dokumentu vložím scripty a css s danými cestami, ten samotný script se už vkládá do těla, že jo? No a opět zádrhel:D.. kam s tím php.. jde to normálně do těla dokumentu - tím pádem pak musí mít koncovku php? Nebo to jde externě a jak tedy případně funguje propojení mezi ním a html potažmo JS. Teď mi není moc jasné a.photo - photo = vytvořená třída, tou se pojí php a script? Adresář s fotkami je v php ../img/*.jpg - s tím, že vypíše všechny jpg soubory, bere i jpeg a JPG? Nebo se to musí případně ošetřit i na tyto koncovky? Co je to q42 v rel souvisí to s fancyboxem, je to neměná hodnota nebo něco značí? U miniatur pokud to opravdu zmenší na požadovanou velikost super, pokud to ale bude načítat ten velký obrázek do malého a zdržovat načítání celé stránky, blbé :/.. Díky za odpovědi, opravdu jsem v těchto jazycích dost pozadu, letos sem se zapřisáhla, že s tím něco začnu dělat.. tak se na to du kouknout, trošku si s tím pohrát a uvidíme. |
||
| Alphard Profil |
#7 · Zasláno: 8. 8. 2013, 15:40:45
• PHP je součástí stránky, když má soubor správnou příponu (zpravidla .php), server script vykoná. To, co jsem uvedl v [#5] je triviální, ale funkčí ukázka, zkoušel jsem to u sebe, v této podobě to funguje.
• photo je třída, kterou si odchytí jQuery a vytvoří galerii. q42 je statický atribut, fancybox takto vytváří galerii, bude rotovat fotky se stejným rel (jestli vám 42 nepřijde povědomá, něco je špatně ;-)).
• Načítal by se velký obrázek, vždyť píši, že zmenšení pomocí css je jen příklad (mám u sebe na lokálu nasypaných pár fotek, ale nemám k nim miniatury). |
||
| CFKarca Profil |
#8 · Zasláno: 8. 8. 2013, 16:06:06 · Upravil/a: CFKarca
Jojo, nakonec jsem to nějak rozjela.. vypsalo mi to jpg obrázky ze složky a fancybox funguje na jedničku. Zádrhel mám teď ve stylizaci.. když si navolím border a margin do css, jede dost blbě a rozhodí mi stránku. Asi by ho to chtělo zakomponovat sem, že..?
echo "<a href=\"$image\" class=\"photo\" rel=\"q42\"><img src=\"$image\" style=\"height:100px\"></a>"; do style.. jen mám teď teda zmatky, kam přesně jak se rozdělují jednotlivé atributy pokud budu chtít připsat border: 2px solid white půjde to nebo to musím po staru na border:2px border-color:white border-style:solid ? Pokud je to tedy vůbec možné sem zakomponovat.. samozřejmě bych mohla místo toho použít ručně udělané náhledy(miniatury) - to bych pak musela ovšem upravit kód a to je pro mě zatím složité.. nenahrávám originály obrázků, ale i tak pro pomalý internet je zmenšení z 700x469 zbytečný záhul, no. PS q42 mi opravdu nic neříká, to je tak když je Grafik nucen šťourat se v PHP a JS.. opravdu jsem na nízké úrovni, potřebuju se zorientovat v základech, abych mohla dělat víc než jen kopírovat a přepisovat hodnoty. :) Každopádně moc díky za reakce, chápu že je to pro Vás triviální.. snad do toho stádia taky jednou dospěji. :) Tak jsem to nakonec asi zvládla vepsat.. :D Ok, uznávám, že jsem to prvně měla zkusit a až pak se ptát:) Pardon. Poslední, co tak večer zkusím nahrávání dalších fotografií, zda to bude fungpvat bez problémů a nenastanou kolize se stránkou. Takže všechno funguje.. mohu-li se ještě tedy zeptat jakkožto blbec na to q42? |
||
|
Časová prodleva: 1 rok
|
|||
| fotozbranek Profil |
Momentálně řeším stejný problém už asi třetí den, ale ani díky tomuhle návodu se mi to nedaří dotáhnout do zdárného konce, je tu někdo, kdo by mi poradil, kde dělám chybu? Samotný lightbox funguje pouze když vypisuji odkazy na fotky ručně jednu po druhé (čehož se právě chci zbavit) ... ale při čtení fotek z adresáře pomocí php skriptu se mi na stránce sice zobrazí fotky, dokonce se na každou dá i kliknout, ale zobrazí se mi v okně pouze fotka a neotevře se již lightbox ... začínám bejt celkem zoufalej.
čistej html kód vypadá takhle: <a href="galerie/portret/IMG_9964-1.jpg" data-lightbox="image-1"> <img src="galerie/portret/IMG_9964-1-nahled.jpg"> </a> skript mám stejně, jak je tady už uveden výše s pozměněnou cestou adresáře , jen přemýšlím, nemusím do něj někam ještě vměstnat to data-lightbox="image-1" případně kam? zkoušl jsem snad všechny místa a nic nefungovalo tak už to asi mám! :D Teď by mě ještě zajímalo, jak udělat, aby se ty fotky teda rozklikávaly přes jejich náhledy, když budu mít ve složce jak originální fotku, tak miniaturu. Neporadí někdo? |
||
| Davex Profil |
Odkazům by se měla přidat třída
photo a atribut data-lightbox je tam asi v případě použití Fancyboxu zbytečný.
<a class="photo" href="galerie/portret/IMG_9964-1.jpg"> <img src="galerie/portret/IMG_9964-1-nahled.jpg"> </a> |
||
|
Časová prodleva: 3 měsíce
|
|||
| sik23 Profil * |
#11 · Zasláno: 23. 12. 2014, 23:43:04
Zdravím,
mám fotogalerii, načítám do ní fotky ze složky a pomocí php je nechávám vypsat. Celé je to poté v lightboxu. Chtěl bych ale, aby se mi u každé fotky zobrazoval její popis. foreach (glob('./galerie/hangar/*.jpg') as $image)
{
echo "<a class='odkaz' href='$image' data-lightbox='roadtrip'><img src='$image' style='height:109px' class='img' /></a>\n";
}našel jsem tohle načítání: $soubor = fopen("./galerie/hangar/popis.txt", "r");
while(!feof($soubor))
{
$a = fgets($soubor);
echo "$a<br>";
} Akorát ať dělám co dělám, tak to zobrazuje pořád špatně. Buď se obrázky znásobí, taže namísto 9 fotek je jich 81 (každá 9x) a každej z 9ti obrázků ve fotogalerii má přiřazen první řádek textu ze souboru a takhle to pokračuje až do konce. $soubor = fopen("./galerie/hangar/popis.txt", "r");
while(!feof($soubor))
{
$a = fgets($soubor);
foreach (glob('./galerie/hangar/*.jpg') as $image)
{
echo "<a class='odkaz' href='$image' data-lightbox='roadtrip' title='$a'><img src='$image' style='height:109px' class='img' title='$a' /></a>\n";
}
}
Nebo se načte správně jen 9 obrázků, ale popis se u každého zobrazí ten poslední, takže mám sice obrázky, ale u všech stejný popis) $soubor = fopen("./galerie/hangar/popis.txt", "r");
while(!feof($soubor))
{
$a = fgets($soubor);
}
foreach (glob('./galerie/hangar/*.jpg') as $image)
{
echo "<a class='odkaz' href='$image' data-lightbox='roadtrip' title='$a'><img src='$image' style='height:109px' class='img' title='$a' /></a>\n";
}
a poslední úpravou jsem docílil toho, že se mi sice správně načte 9 fotek, ke každé se přiřadí správný popisek (tedy u každé fotky jiný), ale všude je zobrazena jen první fotka. $soubor = fopen("./galerie/hangar/popis.txt", "r");
foreach (glob('./galerie/hangar/*.jpg') as $image)
{
while(!feof($soubor))
{
$a = fgets($soubor);
echo "<a class='odkaz' href='$image' data-lightbox='roadtrip' title='$a'><img src='$image' style='height:109px' class='img' title='$a' /></a>\n";
}
}
Vím že je to někde v tý kombiaci cyklů, ale už mi to opravdu nemyslí. Taky je možný že to takhle vůbec nejde a musí se to udělat jinak. Poradí někdo... |
||
| Chro_ Profil * |
#12 · Zasláno: 24. 12. 2014, 00:19:43
Vzájemné použití "cyklofunkcí" while a foreach znásobí počet iterací. Použil bych jen foreach s tím, že před foreach bych načetl řádky z textového souboru do proměnné typu pole ($soubory) funkcí file s nastaveními přeskakovat prázdné řádky/mazat zalomení řádků z konců řádků (viz manuál), aby popisy s \n na konci nedělaly neplechu v atributech HTML tagů. Před foreach pak ještě nastavil proměnnou $index = 0. Uvnitř cyklu pak bude popis dostupný v $soubory[$index]. Za echem je nutné samozřejmě zvýšit index pomocí $index++ pro další popis k souboru.
|
||
| Alphard Profil |
#13 · Zasláno: 24. 12. 2014, 00:59:52
Chro [#12]:
Spoléhat se na pořadí souborů je trochu riskantní, to už bych radši do toho texťáku jako klíč napsal název souboru a podle něho přiřazoval. Inspirovat se můžete druhým příkladem v této kapitole Práce se soubory. |
||
| Petr_D Profil |
#14 · Zasláno: 24. 12. 2014, 09:16:15
Používám pro fotogalerie toto php-ko. Fotky tahá z přednastaveného souboru, vytvoří miniatury a popdporuje lightbox.
<?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";
} ?> |
||
| sik23 Profil * |
#15 · Zasláno: 24. 12. 2014, 09:59:14 · Upravil/a: sik23
Alphard:
Toto jsem také našel a vyzkoušel, bohužel jsem to nějak nerozchodil, házelo mi to chybu hned u toho $description = [];.
píše to chybu - Parse error: syntax error, unexpected Petr_D: mě načítání fotek funguje také bez problémů, ale chci k tomu načítat popisy fotek ze souboru a tím se mi to rozhazuje. Samotná fotogalerie je u mě ok. |
||
| Petr_D Profil |
#16 · Zasláno: 24. 12. 2014, 10:14:23
sik23:
Moje chyba, špatně jsem pročetl diskuzi. Omlouvám se. |
||
| Chro_ Profil * |
#17 · Zasláno: 26. 12. 2014, 21:27:28
sik23 [#15]:
Dochází k chybě syntaxe, protože zápis iniciace pole v článku na Péhápku funguje až od verze PHP 5.4 včetně. Je chybou, že v článku není uveden i zápis fungující ve všech verzích. $pole = []; //od PHP 5.4 včetně $pole = array(); //pro všechny verze |
||
| sik23 Profil * |
#18 · Zasláno: 27. 12. 2014, 17:15:17
Chro:
díky, pomohlo to, ale ještě se teď peru s předěláním tohoto řádku: $description[$key] = $value; když jsem odebral to pole, zobrazilo to jen poslední řádek z texťáku a když tam dávám závorky, haže mi to opět chyby... Poradil bys ještě prosím. |
||
| Alphard Profil |
#19 · Zasláno: 27. 12. 2014, 17:32:02
Petr_D [#14]:
Takhle vytváříte zmenšeniny při každém načtení galerie, že? To je docela neefektivní, doporučuji doplnit tam aspoň podmínku s file_exists() a náhled vytvářet jen když nebyl vytvořen dříve. Chro [#17]: Nepovažuji to za chybu, verze 5.4 (vydaná na jaře 2012) je stará téměř 3 roky a v současnosti je to nejstarší podporovaná verze. Cokoliv pod 5.4 je staré a nepodporované. sik23 [#18]: Proč? Tento zápis musí fungovat i ve starších verzích. S deklarací pole popsanou výše nesouvisí. Kdyžtak uveďte aktuální kód a chybovou hlášku. |
||
| Petr_D Profil |
#20 · Zasláno: 27. 12. 2014, 17:52:30
Alphard:
Děkuji, příležitostně se na to podívám. Byl tam i nějaký problém, který jsem potlačil "zavináčem", jen už nepamatuji čeho se týkal. |
||
| Alphard Profil |
#21 · Zasláno: 27. 12. 2014, 17:58:22
Petr_D:
„Byl tam i nějaký problém, který jsem potlačil "zavináčem" $obrazky není deklarovaná jako pole, pokud se pole nevytvoří dynamicky v cyklu while, sort dostane nedefinovanou proměnnou a bude si stěžovat.
Nové verze by navíc generovaly deprecated hlášku u funkcí z rodiny ereg* (do budoucna se s nimi nepočítá). |
||
| sik23 Profil * |
#22 · Zasláno: 27. 12. 2014, 21:44:49
Alphard:
Jo špatně jsem tam něco napsal, šlo to. Jinak jsem to teda nějak sesmolil a konečně to funguje, asi to bude prasárna, ale jsem rád že jsem to dal dohromady. Kdyby někdo něco podobného hledal, zde je kód pro fotogalerii, která načítá fotky z adresáře a k tomu ze texťáku přiřazuje popisky, celé to pak jede v lightboxu. <?php
$data = file ("./galerie/hangar/popis.txt");
$index = '0';
if ($i < Count ($data)){
foreach (glob('./galerie/hangar/*.jpg') as $image)
{
$data[$index];
echo "<a class='odkaz' href='$image' data-lightbox='roadtrip' title='$data[$index]'><img src='$image' style='height:109px' class='img' title='$data[$index]' /></a>\n";
$index++;
}
}
else{
echo "něco se pokazilo";
}
?> |
||
|
Časová prodleva: 9 let
|
|||
0