גלריית תמונות ב jQuery.

[CSS]

גלריית תמונות ב jQuery
במדריך הזה אני אלמד אתכם איך לעשות גלריית תמונות ב jQuery עם 2 כפתורים, קדימה ואחורה, יחד עם עיגולי מיספור.

שלב 1: מבנה הגלריה.
כדי לבנות גלריית תמונות, קודם כל צריך לבנות את הצד העיצובי.
אנחנו נתחיל בהבנה איך הגלריה שלנו הולכת לעבוד.
מה שבעצם אמור לקרות, זה להציג את כל התמונות, שלידם יהיה כפתור קדימה ואחורה, שאם לוחצים עליהם אז זה עובר לתמונה הבאה.
נתחיל עם ה HTML:

<div class="gallery">
<div class="arrow" id="pre"> < </div>
<div id="slide">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
</div>
<div class="arrow" id="next"> > </div>
</div>

בקוד הזה אנחנו הגדרנו כפתור האחורה עם #pre,
3 תמונות שנמצאות בתוך דיב בשם #slide,
וכפתור הבא, בשם #next.
בשני הכפתורים ציינו גם class כ arrow לצורך עיצוב.
התוצאה שלנו כזאת (אתם רשאים לבחור איזה תמונות שתרצו):


עכשיו בואו נעצב את הגלריה שלנו, באופן בסיסי לגמרי.
נעניק ל .gallery רוחב, ונמרכז אותו, מכיוון שכל מה שיהיה ב .gallery יזוז לצד שמאל (אפשר גם לצד ימין, לצורך הדוגמא נשתמש בשמאל), כדי שהכל יהיה באותה שורה.

.gallery {width:490px; margin:auto;}

הרוחב של הגלריה צריך להיות ברוחב התמונות (מאוד מומלץ לעשות את כל התמונות באותו אורך ורוחב), + 20-30px של החצים.
זה כמובן רוחב מומלץ כדי שהגלריה תהיה כביכול באמצע, אתם גם את זה יכולים לשנות.
עכשיו נגדיר ל #slide רוחב (כרוחב התמונות), ונמקם אותו בצד שמאל.

#slide {width:450px; float:left; }

מה שנקבל עד עכשיו זה כל תמונה בשורה נפרדת, לכן אנחנו צריכים להציג רק את התמונה הראשונה של הגלריה שלנו.
נעשה זאת באמצעות CSS, ע"י שנגדיר לכל התמונות display none , שזה בעצם מסתיר את התמונות, ורק לתמונה הראשונה נגדיר display block, שזה בעצם מציג את התמונה.

#slide img {display:none;}
#slide img:first-child {display:block;}

עכשיו נראה רק את התמונה הראשונה.
מה שנשאר לעשות כרגע ב CSS זה לעצב את החצים.
אתם רשאים לעצב איך שבא לכם, אבל הכנתי מראש קוד שימקם את החצים באמצע התמונה.

.arrow {float:left; font-size:25pt; font-weight:bold; margin-top:150px; cursor:pointer;}

עד עכשיו התוצאה שלנו היא כזאת:

שלב 2: הפעלת הגלריה.
אחרי שבשלב הקודם בנינו ע"י CSS את המבנה של של הגלריה שלנו, עכשיו נצטרך לגרום לגלריה שלנו לעבוד.
נתחיל קודם כל ב"הפעלת" כפתור ה"הבא".
נתחיל את הקוד שלנו בשורה של ready function.

$(document).ready(function() {

});

לפני שנתחיל לבנות את הגלריה שלנו, נוסיף כמה משתנים שיעזרו לנו בהמשך - משתנה שיכיל את כמות התמונות שיש לנו בגלריה, ומשתנה שיכיל את המספר תמונה הבאה (נגיד אנחנו עכשיו בתמונה 1, אז במשתנה יהיה המספר 2).

var numimg = $("#slide img").index()+1, nextimg = 1; 

המשתנה numimg מכיל את מספר התמונות שיש לנו בגלריה.
מכיוון שהספירה מתחילה מ - 0, הוא יציג לנו את מספר התמונות - פחות אחד, אז אנחנו פשוט נוסיף 1 כדי לקבל תוצאה יותר נוחה.
המשתנה nextimg מכיל את המספר של התמונה הבאה שצריכה להופיע.
אחרי שיש לנו את המשתנים, נבצע אירוע לחיצה על כפתור הבא, שלהזכירכם הוא #next.

$("#next").click(function() {

});

עכשיו מה אמור להיות כשלוחצים על הכפתור? מספר התמונה שנמצא במשתנה nextimg צריכה להופיע.
אז מה שנעשה זה שאם לוחצים על כפתור ה #next, אז זה יסתיר את כל התמונות, וזה יציג רק את התמונה הבאה.
לאחר מכן פשוט נגדיל את nextimg ב - 1.

$("#slide img").hide();
$("#slide img").eq(nextimg).fadeIn(200);
nextimg++;

עם פונקציית eq אנחנו יכולים לפנות לתמונה שמספרה nextimg.
אם נבדוק, אז מה שעד עכשיו קיבלנו זה שאם לוחצים על כפתור הבא, אז זה עובר לתמונה הבאה.
דפדפו בתמונות שלכם, והופס! כשמגיעים לתמונה האחרונה התמונות נעלמות.
למה? כי אחרי התמונה האחרונה אין תמונות, אבל המשתנה nextimg ממשיך לגדול.
לכן נבצע תנאי, שבמידה והמספר של התמונה הבאה שווה למספר התמונות, אז שזה יחזור להתחלה.

if(nextimg == numimg) {nextimg = 0;}

עכשיו תבדקו, ותראו שעכשיו כשמגיעים לתמונה האחרונה, ולוחצים על "הבא", אז זה חוזר לתמונה הראשונה.
הקוד הסופי של ה"הבא":

$("#next").click(function() {
if(nextimg == numimg) {nextimg = 0;}
$("#slide img").hide();
$("#slide img").eq(nextimg).fadeIn(200);
nextimg++;
});

עכשיו נעשה את כפתור החזרה.
הכפתור עובד על אותו עיקרון, רק יש בו קצת שינויים.
כדי לקבל את המספר התמונה שצריך להגיע אליו, צריך להוריד מ nextimg אחד, כדי להגיע למספר התמונה שאנחנו עכשיו נמצאים, ובתוך ההצגה של התמונה נוריד עוד 1.
לאחר מכן, נבצע תנאי שיבדוק האם התמונה שאנחנו נמצאים בה כעת היא הראשונה (תמונה מס' 0 - הספירה מתחילה מ - 0), במידה וכן, אז המספר תמונה שאנחנו נמצאים בה זה המספר של כל התמונות.

$("#pre").click(function() {
if(nextimg == 0) {nextimg = numimg;}
nextimg--;
$("#slide img").hide();
$("#slide img").eq(nextimg-1).fadeIn(200);
});

זהו, סיימנו את החלק של הגלריה.

שלב 3: עיגולי מיקום.
בשלב הזה נבצע ככה שמתחת לגלריה יופיעו עיגולים כמספר התמונות, וכל פעם שנעבור בין תמונות, אז העיגול של התמונה יתמלא.
מקרה כזה הוא דומה למקרה שיש בסמארטפונים, שיש עמודים, ויש עיגולים למטה שממוספרים לפי מספר העמודים שיש.
איך זה עובד?
ניצור דיב עם id numnextimg

<div id="numnextimg"></div>

ונשאיר אותו ריק.
נעבור לקובץ ה Css ונעצב את העיגולים, הכנתי גם פה מראש עיצוב:

#numnextimg {clear:both; margin:auto; margin-top:5px; width:100px; }
.circle {background:white; margin:auto; border:2px solid gray; border-radius:25px; height:10px; width:10px; 
float:left; margin:0 5px 0 5px; cursor:pointer;}

במקרה שלנו, numnextimg זה הדיב הראשי שבתוכו יהיו העיגולים - שהם .circle .
נעבור לקובץ ה Javascript ועכשיו נעשה קוד שימלא את numnextimg בעיגולים לפי מספר התמונות שיש, ע"י לולאה פשוטה.

for(var i = 0; i < numimg; i++) {
nni = $("#numnextimg").html();
$("#numnextimg").html(nni + '<div class="circle"></div>');
}

אל תשכחו להגדיר את המשתנה (nni).
אם אתם שואלים את עצמכם למה לא השתמשתי ב append, זה בכוונה, כי צריך לעשות את העיגולים ב HTML.
עכשיו אם נריץ את הקוד, נראה שיש לנו עיגולים.

במידה ולא מופיעים לכם עיגולים, חיזרו שוב על השלב הזה, וודאו שכל מה שעשינו בשלבים הקודמים נשמר.
עכשיו נעשה ככה שהעיגול יהיה צבוע בהתאם לתמונה שאנחנו נמצאים בה.
קודם כל, נעשה שהעיגול הראשון יהיה צבוע.

$("#numnextimg .circle").eq(0).css({"background":"lightgray"});

ועכשיו העיגול הראשון יהיה בצבע אפור.
אם תלחצו על קדימה ואחורה תראו שהעיגול עדיין על הראשון, לכן נוסיף באירוע לחיצה על #next את השורה הזאת:

$("#numnextimg .circle").css({"background":"white"});
$("#numnextimg .circle").eq(nextimg).css({"background":"lightgray"});

שזה בעצם מאפס את כל העיגולים, ואז צובע את העיגול בהתאם לתמונה שתופיע.

כנ"ל נעשה גם ב #pre , רק שהפעם נוריד 1 ב nextimg כדי לקבל את המספר של התמונה שאנחנו בה עכשיו (דיברנו על זה בשלב הקודם):

$("#numnextimg .circle").css({"background":"white"});
$("#numnextimg .circle").eq(nextimg-1).css({"background":"lightgray"});

עכשיו אם תדפדפו בין התמונות, תראו שלפי התמונה שאתם נמצאים בה, העיגולים משתנים.
עכשיו בואו נעשה ככה שאם לוחצים על העיגול השני למשל, אז התמונה השנייה תופיע - מאין דיפדוף מהיר.
איך זה יעבוד? בידיוק אותו דבר, רק nextimg יהיה שונה.
ה nextimg יהיה המספר של העיגול שנלחץ עליו, ואז עושים את כל הפעולות שעשינו ב #next.

$("#numnextimg .circle").click(function() {
nextimg = $(this).index();
$("#slide img").hide();
$("#slide img").eq(nextimg).fadeIn(200);
$("#numnextimg .circle").css({"background":"white"});
$("#numnextimg .circle").eq(nextimg).css({"background":"lightgray"});
nextimg++;
});

זהו, סיימתי את המדריך פה.
לקח לי שעתיים לכתוב אותו, ועוד שעה לבנות מראש, ולחשוב ולתכנן.
למי שעשה הכל ועדיין לא עובד לו, או שפשוט רוצה את זה מוכן, הינה הקוד המלא של הגלריה:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.gallery {width:490px; margin:auto;}
#slide {width:450px; float:left; }
#slide img {display:none;}
#slide img:first-child {display:block;}
.arrow {float:left; font-size:25pt; font-weight:bold; margin-top:150px; cursor:pointer;}
#numnextimg {clear:both; margin:auto; margin-top:5px; width:100px; }
.circle {background:white; margin:auto; border:2px solid gray; border-radius:25px; height:10px; width:10px; 
float:left; margin:0 5px 0 5px; cursor:pointer;}
</style>
<script type="text/javascript">
$(document).ready(function() {
var numimg = $("#slide img").index()+1, nextimg = 1, nni;

$("#next").click(function() {
if(nextimg == numimg) {nextimg = 0;}
$("#slide img").hide();
$("#slide img").eq(nextimg).fadeIn(200);
$("#numnextimg .circle").css({"background":"white"});
$("#numnextimg .circle").eq(nextimg).css({"background":"lightgray"});
nextimg++;
});

$("#pre").click(function() {
if(nextimg == 0) {nextimg = numimg;}
nextimg--;
$("#slide img").hide();
$("#slide img").eq(nextimg-1).fadeIn(200);
$("#numnextimg .circle").css({"background":"white"});
$("#numnextimg .circle").eq(nextimg-1).css({"background":"lightgray"});
});

for(var i = 0; i < numimg; i++) {
nni = $("#numnextimg").html();
$("#numnextimg").html(nni + '<div class="circle"></div>');
}
$("#numnextimg .circle").eq(0).css({"background":"lightgray"});

$("#numnextimg .circle").click(function() {
nextimg = $(this).index();
$("#slide img").hide();
$("#slide img").eq(nextimg).fadeIn(200);
$("#numnextimg .circle").css({"background":"white"});
$("#numnextimg .circle").eq(nextimg).css({"background":"lightgray"});
nextimg++;
});
});
</script>

<div class="arrow" id="pre"> < </div>
<div id="slide">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
</div>
<div class="arrow" id="next"> > </div>

<div id="numnextimg"></div>

תגובות, הצעות, שאלות יתקבלו בברכה.

[-Smoxer-]

מדריך מצויין! המשך כך.

[Quartz]

מדריך מצויין!
רק היית יכול לעצב את הכפתורים יפים יותר
מקווה שיעזור להרבה D:

[CSS]

מדריך מצויין!
רק היית יכול לעצב את הכפתורים יפים יותר
מקווה שיעזור להרבה D:

תודה, אבל המדריך זה רק להסביר איך לעשות גלריה בסיסית.
אפשר לעצב הכל הרבה יותר יפה.