מדריך|אזורים נגללים בJQUERY

[M.a.T.a.N]

טוב אז המדריך הזה בעצם מלמד איך ניתן לעשות אזור זז בJQUERY, זה דבר די חשוב והכרחי כמעט לכל אתר עם גלריית תמונות.
למי שעדיין לא הבין במה מדובר אפשר לראות פה - http://www.queness.com/resources/htm...sel/index.html

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

PHP קוד:

        <div id="scrollPics">
            <div id="scrolling-content">
                        <div class="mystuff">pic1</div>
                        <div class="mystuff">pic1</div>
                        <div class="mystuff">pic1</div>
                        <div class="mystuff">pic1</div>
            </div>
        </div> 


במעטפת הראשונה (שעוטפת גם את הDIV השני ואת כל הבלוקים המשתנים) ניתן לה בCSS ככה

width - אורך WIDTH כל אזור בודד, כלומר WIDTH הבלוק האמצעי (שמשתנה)
height - כנ"ל הגובה
position - ניתן לו REALITIVE, כדי שיזהה שזה בלוק לא קבוע
overflow - נקבע כHIDDEN כמובן, חשוב מאוד כדי שלא יווצר פס הגלילה

עכשיו כמו שאמרנו, יש בתוך המעטפת הכוללת עוד מעטפת, וגם לה כמובן נגדיר את הדברים הבאים בCSS

width - צריך להיות אורך הWIDTH הקודם כפול מספר הבלוקים המשתנים (כלומר אם קבענו שאורך כל בלוק הוא 100 ויש לנו 8 בלוקים משתנים אז הWIDTH פה יהיה 800).
*אגב, למקרה שאם אנו לא בדיוק יודעים כמה בלוקים יש (אם זה משתנה) אפשר לקבוע פה סתם מספר, כשתראו את קוד הJQUERY תבינו איך הוא מזהה לבד ומגדיר לו את הWIDTH
height - הגובה, בד"כ (אפילו תמיד) כמו הגובה של המעטפת הקודמת (הראשונה)
posiotion - צריך להגידר כABSOLUTE
left - נקבע לו 0

כמו שאמרנו, יש לכל בלוק משתנה DIV בפני עצמו (חשוב שלכל הבלוקים יהיה DIV בעל אותו מזהה CLASS או ID), נגדיר גם לו חלק בCSS כך

width - אורך WIDTH של כל בלוק, עוד פעם (:
float - נקבע כLEFT

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

יופי, עכשיו נשתול את הקוד הבא

PHP קוד:

<script type="text/JavaScript">
$(document).ready(function(){
    var numItems = $('.mystuff').length
    var max_width = parseInt((numItems)*725);
    

    $("#scroll-left").click(function(){
     
    if((parseInt($('#scrolling-content').position().left)-1450) >= (max_width*-1))
        $("#scrolling-content").animate({left: parseInt($("#scrolling-content").css('left'))-725 + 'px'},750);
    else
         $("#scrolling-content").animate({left: 0 + 'px'},400);        
    });
    
    $("#scroll-right").click(function(){
        
    if(parseInt($('#scrolling-content').position().left) <= -725)
        $("#scrolling-content").animate({left: parseInt($("#scrolling-content").css('left'))+725 + 'px'},750);
        </script>
    }); 


אני ינסה להסביר מה בערך קורה כאן.
בהתחלה רואים VAR, למי שטיפה מבין יזהה שמדובר בקביעת משתנה, יש לנו שתיים.
הVAR הראשון קובע את מספר הבלוקים המשתנים, זה בעצם אומר לו ככה "תמצא לי מספר פעמים שהCLASS בשם mystuff קיים.
הVAR השני פשוט מגדיר משתנה ובו הWIDTH הכולל (אם אתם זוכרים אמרתי למעלה שאם אנו לא יודעים את מספר הבלוקים וזה יכול להשתנות אז נוכל סתם להכניס מספר והJQUERY כבר לבד יגדיר את הWIDTH המתאים).
אז בעצם אתם בטח כבר הבנתם מה המשתנה (VAR) השני מגדיר, אבל עדיין בשביל הפרוטוקול (: המשתנה השני אומר "קבע לי כמספר שלם את הכפולה של 725 במשתנה הראשון (כלומר במספר הבלוקים), 725 זה כמובן אתה תקבע אורך כל בלוק.
עכשיו נשאר רק עוד שני קטעים חשובים, שימו לב ל-

PHP קוד:

$("#scroll-left").click(function() 


ול-

PHP קוד:

$("#scroll-right").click(function() 


שתי הקודים האלה פשוט מוצאים אם קרה אירוע ובו לחצתי על DIV בשם SCROLL-RIGHT/SCROLL-LEFT, כל אחד מהם הוא הקישור/תמונה שכאשר נלחץ עליו יזיז אותנו לבלוק חדש.
*למי שלא מסתדר לו הLEFT וRIGHT פה אני יודע שזה טיפה מוזר, ובעצם הכפתור של הLEFT וRIGHT התחלפו..אבל עדיין זה לא עקרוני, אחרי שתתעסקו בזה טיפה אתם תדעו לשנות בלי בעיה.
בתוך הSCROLL-LEFT (האירוע הראשון) אנחנו פשוט מבצעים בדיקה אם אנחנו בבלוק האחרון, אם אנחנו לא, אז הוא ימשיך עוד לגלול, אם כן ועדיין לחצנו על הכפתור שיציג לנו עוד בלוקים אז הוא יגלול אותנו (במהירות גדולה יותר) לבלוק הראשון.
*חשוב - אתם רואים שבIF הראשון מבצעת בדיקה עם המספר 1450, פשוט במקרה שלי אורך כל בלוק הוא 725 אז צריך להכפיל בשתיים, תשנו את זה לפי מה שאתם צריכים, אם אורך כל בלוק אצלכם הוא 100 אז במקום איפה שכתוב 1450 תשנו ל200.
כנ"ל לגבי כל מקום בקוד שכתוב 725 תשנו לאורך כל בלוק במקרה שלכם (לצורך הדוגמא - 100).

באירוע השני, שלחצנו על SCROLL-RIGHT הוא פשוט מבצע בדיקה, אם זה הדף הראשון הוא לא יעשה כלום, כי אין לו עוד לאן לזוז, אם לא הוא יזוז לבלוק הבא.

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

[BlueNosE]

נחמד מאוד, אשמח להדגמה עם RTL. תודה על ההשקעה

[M.a.T.a.N]

זה לא סיפור גדול, פשוט לשנות בCSS במקום LEFT לRIGHT כנ"ל בחיצים.
בעצם ככה זה RTL, רק שהפכתי בחיצים את השם, אבל זה לא סיפור זה עדיין עובד עם גלילה לכיוון ימין (: