גלריית תמונות
תוכנית זו היא בעצם גלריית תמונות שלמה. הגלרייה יכולה להציג מספר בלתי מוגבל של תמונות, כך שבכל עמוד יהיו מספר תמונות (לרוחב ולאורך), ויהיו קישורים לעמוד הבא ולעמוד הקודם של הגלרייה כדי לדפדף בדפי הגלרייה. התמונות ייראו בצורה של thumbnails ומתחת לכל תמונה מוקטנת יופיע שם התמונה. כאשר לוחצים על התמונה המוקטנת, נפתח חלון נפרד שמראה את התמונה בגודל המקורי שלה יחד עם התיאור של התמונה, שאותו לא רואים בדף של הגלרייה של התמונות הקטנות.
הערות:
משתמש בקובץ מידע על התמונות בגלריה. ללא שימוש בבסיס נתונים. שילוב עם ג'אווה סקריפט.
שימוש בפונקציות:
array() count() dirname() exit() explode() fclose() filesize() fopen() fread() getimagesize() hebrevc() isset() list() nl2br() str_replace() trim() wordwrap()
gallery.php - הקובץ הראשי של התוכנית. קובץ זה קורא את קובץ המידע על התמונות בגלריה, ומציג את הגלריה עמוד-עמוד.
gallery_conf.inc - קובץ ההגדרות של התוכנית הנכלל בראש הקובץ gallery.php.
show_picture.php - קובץ שמציג את התמונה המקורית יחד עם התיאור שלה.
כדי שגלריית התמונות שלכם תיהיה יעילה, מומלץ ליצור תמונות מוקטנות (thumbnails) לתמונות המקוריות שלכם, כדי שההעלאה של כל דף בגלרייה תיהיה מהירה יותר. את ה-thumbnails ניתן ליצור בתוכנת עיצוב תמונות ע"י הקטנת גודל התמונה. רצוי לשמור את כל התמונות המוקטנות בספריה נפרדת, ולהוסיף לשמה של כל תמונה מוקטנת סיומת של _thumb (כדוגמא) כדי להבחין בין התמונה המקורית לתמונה המוקטנת. אם אין לכם תמונות מוקטנות נשתמש בתמונות המקוריות כ-thumbnails, אך דבר זה עלול להאט את מהירות העלאת הדף.
לאחר שיש לכם את כל התמונות עליכם ליצור קובץ מידע עבור הגלרייה, שיכיל מידע על כל תמונה שבגלרייה (רצוי לשמור את הקובץ בספריית התמונות של הגלרייה). התמונות יופרדו עם הסימן $ והשדות של כל תמונה יופרדו עם |. כל תמונה תכיל לפחות 2 שדות חיוניים: דרך לתמונה המקורית ודרך לתמונה המוקטנת (thumbnail), ואפשרות לעוד 2 שדות אופציונליים: כותרת לתמונה ותיאור התמונה. הדרכים לתמונה המקורית ולתמונה המוקטנת הם יחסיים למיקום של קובץ המידע של הגלרייה. בשדה האחרון (תיאור התמונה) ניתן לכתוב מספר שורות, ובשאר השדות שורות חדשות ייהפכו לרווחים. ניתן דוגמא לקובץ מידע של גלרייה:
file name: gallery_file1.dat
$ tigers.jpg | thumbs/tigers_thumb.jpg | גורי נמרים | 2 גורי נמרים.
חמודים, לא?
$ tan.jpg | thumbs/tan_thumb.jpg | תן | תן אפור.
זה תן או לא?!?! בכל אופן, הוא נראה ממש רעב!.
$ spider.jpg | thumbs/spider_thumb.jpg | עכביש $ giraf.jpg | thumbs/giraf_thumb.jpg | גירפה
$ nets.jpg | thumbs/nets_thumb.jpg
$ tavas.jpg | thumbs/tavas_thumb.jpg | | אילו צבעים מרהיבים!
$ dolphines.jpg|thumbs/dolphines_thumb.jpg|דולפינים
$ zebras.jpg|thumbs/zebras_thumb.jpg|Zebras|בבוקר יום א הזברה קמה,
פשטה את הפיגמה, ישבה וחשבה...
וחשבה...
וחשבה...$ dogs.jpg | thumbs/dogs_thumb.jpg | puppies | they are so.. cute!
שימו לב שבשורה אחת ניתן להכניס מידע על יותר מתמונה אחת. ניתן לכתוב כותרת ותיאור בעברית ובאנגלית. אם נשאיר את הכותרת ריקה אז הכותרת של התמונה תיהיה ערך ברירת המחדל. אפשר להשאיר שורות ריקות בין תמונה לתמונה. חשוב מאוד לא להשתמש בתו ' אחרת לא ניתן יהיה לפתוח את התמונה המקורית כאשר לוחצים על ה-thumbnail.
כעת צריך לשנות את ההגדרות בקובץ gallery_conf.inc שיתאימו לגלרייה שלכם. $gallery_file יכיל את המיקום של קובץ המידע של הגלרייה. $gallery_name הוא שם הגלרייה. $gallery_pics_per_page_height ו-$gallery_pics_per_page_width הם מספר התמונות שייראו בכל דף לאורך ולרוחב (סה"כ תמונות = תמונות לאורך x תמונות לרוחב). $gallery_thumb_width ו-$gallery_thumb_height הם הרוחב והאורך הקבועים של כל תמונה מוקטנת (שנה ל-(-1) כדי להדפיס באורך ו/או ברוחב של התמונה המוקטנת). ו-$gallery_default_pic_name הוא ברירת המחדל לשם של תמונה שלא נקבע לו שם בקובץ המידע. אחרי הכל פשוט פתחו את הקובץ בדפדפן שלכם וצפו בתמונות הגלרייה שלכם.
הקובץ gallery.php הוא הקובץ הראשי של התוכנית. קובץ זה מציג את הגלרייה דף אחר דף. בתחילה אנו מייבאים את קובץ ההגדרות gallery_conf.inc.
GetPhotos($file) - הפונקציה מחזירה מערך המכיל מידע על כל התמונות שבגלרייה המוגדרת בקובץ $file. פותחים את הקובץ $file לקריאה ושומרים את הידית ב-$fp, ובמידה ואי-אפשר לפתוח את הקובץ לקריאה, אנו יוצאים מן הפונקציה ומחזירים ערך שקר. לתוך $fl אנו קוראים את כל תוכן הקובץ. מחלקים את הקובץ לתמונות לפי הסימן $ ושומרים את המערך ב-$p. בעזרת לולאה אנו עוברים על כל תמונה במערך $p ושואבים ממנו את המידע. שימו לב שאנו מתחילים מ-$p[1], וזאת משום שהפונקציה explode() שומרת במקום ה-0 את מה שנמצא לפני הסימן הראשון, ובקובץ אין שום מידע לפני הסימן הראשון, לכן אנו מדלגים עליו. מכל שורה אנו מורידים את הסימן $ ע"י החלפת הסימן במחרוזת ריקה. מפרקים את המידע על התמונה עם הסימן | עם מקסימום של ארבעת החלקים הראשונים, ושומרים כל איבר במערך שמוחזר ברשימת המשתנים לפי הסדר. את המידע שאספנו על התמונה אנו מוסיפים למערך, ולא שוכחים להוריד תווים לבנים מיותרים מן הקצוות. לבסוף סוגרים את הקובץ ומחזירים את מערך המידע על התמונות.
לפני שמגיעים לחלק הראשי של התוכנית אנו מדפיסים באופן קבוע קוד של JavaScript. יצרנו פונקציה ב-JavaScript (ועל-כן היא אינה מוכרת ל-PHP), שתפקידה לפתוח חלון חדש שיראה את התמונה ואת התיאור שלה באמצעות קובץ PHP אחר, show_picture.php.
כעת אנו מגיעים לחלק הראשי של התכנית. בודקים אם המשתנה המורה על מספר העמוד בגלרייה ($gallerypage) מאותחל, ואם לא אנו מאתחלים אותו ל-1. $gallery_pics מכיל את מערך התמונות שמתקבל מקריאה לפונקציה GetPhotos($gallery_file). אם אנו מקבלים ערך שקר במקום מערך, אז מדפיסים הודעת שגיאה ומסיימים עם exit. $gallery_dir הוא הספריה שבה נמצאת הגלרייה (קובץ המידע של הגלרייה). $gallery_cur הוא מספר התמונה במערך שהוא הראשון בעמוד, והוא מחושב בצורה הבאה: [1 - (מספר דף בגלרייה)] x [(מספר התמונות לאורך בכל עמוד)] x [(מספר התמונות לרוחב בכל עמוד)].
עכשיו נדפיס את הטבלה עם התמונות:
<?php $gallery_cur=(
$gallerypage-
1)*
$gallery_pics_per_page_height*
$gallery_pics_per_page_width;
echo "<TABLE border=1 bgcolor=\"#000000\" cellpadding=3 cellspacing=5>\n";
for (
$gallery_i=
0 ;
$gallery_i<
$gallery_pics_per_page_height ;
$gallery_i++)
//goes over the rows
{
echo "<TR align=\"center\" valign=\"top\">\n";
//starting a new line
for (
$gallery_j=
0 ;
$gallery_j<
$gallery_pics_per_page_width ;
$gallery_j++)
//goes over the columns
{
if (
isset(
$gallery_pics[
$gallery_cur]))
//if the entry is set, we print the image thumnail in the table
{
$gallery_img_size=@
getimagesize(
$gallery_dir.
$gallery_pics[
$gallery_cur][
'pic_file']);
echo "<TD>\n";
echo "<A href=\"javascript:GalleryOpenPicture('".
$gallery_dir.
$gallery_pics[
$gallery_cur][
'pic_file'].
"','".
$gallery_pics[
$gallery_cur][
'pic_name'].
"','".
nl2br(
$gallery_pics[
$gallery_cur][
'pic_desc']).
"',".
$gallery_img_size[
0].
",".
$gallery_img_size[
1].
")\"><IMG src=\"".
$gallery_dir.
$gallery_pics[
$gallery_cur][
'pic_thumb'].
"\" alt=\"".
$gallery_pics[
$gallery_cur][
'pic_name'].
"\"";
echo (
$gallery_thumb_width>
0)?
" width=".
$gallery_thumb_width:
"";
echo (
$gallery_thumb_height>
0)?
" height=".
$gallery_thumb_height:
"";
echo " border=0><BR><FONT color=\"#44BB99\">".
wordwrap(
$gallery_pics[
$gallery_cur][
'pic_name'],
13,
"<BR>").
"</FONT></A>\n";
//prints the image and its link
echo "</TD>\n";
}
else //else if there's no entry, we end the table
{
echo "</TR>\n";
//ends the line
break 2;
//stopping the 2 loops
}
$gallery_cur++;
//going to the next picture
}
echo "</TR>";
//closing the line
}
?>
בהתחלה פותחים את הטבלה, ואז הלולאה הראשונה עוברת על השורות ומדפיסה שורה חדשה לטבלה. הלולאה השנייה מדפיסה את העמודות שבטבלה. $gallery_cur, כפי שהוזכר, הוא מספר האיבר במערך התמונות שמופיע ראשון בדף התמונות הנוכחי. אם התמונה $gallery_pics[$gallery_cur] קיימת אז מדפיסים את התמונה בטבלה עם המידע שיש עליו. $gallery_img_size מכיל מידע על גודלה של התמונה המקורית, ובהתאם לכך קובע את גודל החלון החדש שייפתח. אם בקובץ ההגדרות הוגדר גודל קבוע של thumbnails, אז אנו מדפיסים את המאפיינים של אורך ו/או רוחב בתג התמונה של ה-thumbnail, ואם הם לא מוגדרים אנו לא מדפיסים כלל את המאפיינים הללו והתמונה המוקטנת תראה בגודלה הטבעי. לאחר כל הדפסת תמונה אנו מקדמים את מספר התמונה הנוכחית לתמונה הבאה במערך. במידה והתמונה הנוכחית ($gallery_pics[$gallery_cur]) לא קיימת (הבלוק של else), אנו נסגור את השורה ונסיים את 2 הלולאות, כי נגמרו התמונות והטבלה לא התמלאה עדיין. לאחר הדפסת הטבלה נדפיס את השורה עם הקישורים לדף הבא והקודם בגלריה:
<?php //prints the 'next'-'prev' links:
echo "<TR>\n<TD colspan=$gallery_pics_per_page_width><TABLE bgcolor=\"#99CCCC\" width=100% border=0 cellpadding=2 cellspacing=0>\n<TR>\n<TD width=50% align=\"right\">";
if (
$gallerypage>
1)
echo "<A href=\"$PHP_SELF?gallerypage=".(
$gallerypage-
1).
"\">הקודם</A>";
echo "</TD>\n<TD width=50% align=\"left\">";
if (
$gallery_cur<
count(
$gallery_pics))
echo "<A href=\"$PHP_SELF?gallerypage=".(
$gallerypage+
1).
"\">הבא</A>";
echo "</TD>\n</TR>\n</TABLE>\n</TR>\n</TABLE>\n";
?>
בשורה נפרדת אנו מדפיסים טבלה קטנה שתכיל את הקישורים. אם מספר הדף הנוכחי גדול מ-1, אז יש לנו דף הקודם לדף הנוכחי, לכן נדפיס קישור לדף הקודם עם מספר דף קטן ב-1. ואם מספר התמונה הנוכחית ($gallery_cur) שהגענו אליו בסיום 2 הלולאות, קטן מסה"כ התמונות במערך, אז יש לנו דף תמונות נוסף ולכן נדפיס קישור לדף הבא עם מספר עמוד גדול ב-1. בסופו של דבר נסגור את הטבלאות שפתחנו, וזהו - סיימנו להדפיס את דף הגלרייה.
קובץ זה אחראי על הצגת התמונה והתיאור שלה (אם יש לה) בחלון נפרד לאחר שלוחצים על thumbnail בגלרייה. רובו של קובץ זה הוא HTML אך עיקרו הוא PHP. הקובץ מקבל 3 נתונים כאשר פותחים אותו: מיקום התמונה המקורית, שם התמונה (אם יש) והתיאור שלה (אם יש). אנו יוצרים טבלה ברוחב התמונה, ושמים את התמונה בשורה הראשונה. בשורה השניה שמים את התיאור (אם יש), ובשורה השלישית שמנו כפתור שלחיצה עליו תסגור את החלון.
הדפסת התיאור נראית כך:
<?= hebrevc(str_replace("<br />","\n",$desc),($i_wid/8)); ?>
אנו מחליפים את התו של ירידת שורה ב-HTML (<br />) ב-\n, ואז באמצעות הפונקציה hebrevc() אנו הופכים את הטקסט לעברית ויזואלית, תוך כדי הפיכת \n ל-<br /> בחזרה, ובנוסף אנו שוברים שורה כל מספר אותיות שמוגדר להיות אורך התמונה (וגם אורך הטבלה) חלקי 8 (שהוא רוחב ממוצע של אות בגופן שקבענו).
| גלרית תמונות | 02-11-02 01:02
arale | #591 |
| יש אפשרות לעשות גלרית תמונות שכל התמונות שבגלריה יהיו בתיקיה כלשהי וכשמכניסים עוד משהו לגלריה הוא יופיע אוטומטית??? |
|
| אני יכול לעשות עם בסיס נתונים.. | 31-10-03 03:02
חי | #1180 |
| אני יכול להפוך את הקובץ של הנתונים לקובץ php ששואב נתונים מהמסד נתונים? |
|
| להפוך למסד נתונים | 31-10-03 17:01
אלי חן (מנהל) | #1209 |
| בבדאי שאפשרי.. ואף רצוי לשמור נתונים ב-DB מאשר בקבצים. |
|
| גלריה נחמדה | 02-11-03 23:01
צביקה | #1337 |
| יש שני דברים שעולים לי בראש כתוספת, והם יצירת תמונות מייצגות באופן אוטומטי באמצעות GDI, והעלאת תמונות מטופס ניהול.
ישנה גלריה שאני משתמש בה באתר שלי, שמה YAPIG, וניתן להוריד אותה באתר המפתחים SOURCEFORGE
ניתן גם לחפש את המילה YAPIG באינטרנט.
הגלריה YAPIG גם מגדילה לעשות ושומרת את התמונות המייצגות, כך שאין צורך ליצור אותם מחדש בכל צפייה באינדקס התמונות.
בהצלחה!
צביקה |
|
| בקשר לגלריה | 03-12-04 05:02
ניצן גור | #1479 |
| ראיתי את המערכת הזאת לקחתי את אותו רעיון בניתי בדיוק אותו דבר רק שבמקום קובץ טקסט עשיתי שזה יקח את התמונות הישר מתקיה, הבעיה העיקרית שלי היא מספור הדפים של התמונות.. מישהו אולי יודע? |
|
| כותרת | 06-12-06 16:01
יבגניה אלקינד | #2688 |
| איפה משנים את הכותרת "pictures" שבדף הראשי? |
|
הוספה למועדפים: