הוסטס - פורום אחסון האתרים הגדול בישראל

עמוד 1 מתוך 2

הצג 40 הודעות באשכול על דף אחד

הוסטס - פורום אחסון האתרים הגדול בישראל (https://hosts.co.il/forums/index.php)

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - עזרה בביצוע hide ב jquery (https://hosts.co.il/forums/showthread.php?t=98782)

Ori The Man

22-07-12 12:13

עזרה בביצוע hide ב jquery

אהלן,
אני עושה מעיין גלריה באמצעות JQUERY ויש לי בעיה כאשר אני עושה hide ו show התמונה מופיעה לפני ה show ורק אז זה עושה את זה
אתם יכולים לראות
http://www.oritheman.net/cms/gal.php#

HTML קוד:

$('#Images').delegate('img','click', function(){

        $('#Left-Side').fadeOut("slow")

        

        $('#Left-Side').fadeIn("slow");

        $('#largeImage').attr('src',$(this).attr('src').replace('thumbs','newsize'));

        $('#description').html($(this).attr('alt'));

איך אפשר שרק אחרי שיבוצע ה hide כל תהליך החלפת התמונה יבוצע

meshuga

22-07-12 12:20

http://api.jquery.com/fadeOut/
תכניס את כל מה שאחרי fadeOut בתור פונקציית callback...תסתכל על הדוגמא שם נראה לי שאתה תבין לבד..זאת עם הAnimation complete

IgalSt

22-07-12 20:34

כמה הערות לגבי קוד ה-jQuery עצמו, כדי לשפר וליעל אותו:

1. מומלץ להשתמש ב- on

2. מומלץ בחום לעשות cache לאובייקטים של jQuery ולא לפזר דולרים על ימין ועל שמאל.

3. כדאי לשרשר מספר פעולות ביחד. אם אתה עושה על אותו האלמנט fadeIn

(4. סטיילינג: תחליט אם אתה משתמש בגרש בודד או גרשיים, ותהיה עקבי)

כך שאת הקוד שלך הייתי משנה ככה:

קוד:

$('#Images').on("click", "img", function(){

        var img = $(this);

        var leftSide = $("#Left-Side");

        leftSide.fadeOut("slow", function(){

                 leftSide.fadeIn("slow");

                 $("#largeImage").attr('src', img.attr("src").replace("thumbs", "newsize"));

                 $("#description").html(img.attr("alt"));

        });

});

Ori The Man

22-07-12 20:41

תודה רבה לשניכם על העזרה!

בעיה קטנה אחרת :)
א. שונא אקספלורר!! (למרות שאני משתמש בו חח)
ב.ברגע שאני מבצע עיגול פינות עם CSS (בעזרת PIE כמובן) זה לא עושה פייד,רק בדפדפנים האחרים,מכירים את הבעיה הזאת?

בניה	22-07-12 21:46

ציטוט:

נכתב במקור על ידי Ori The Man (פרסם 851927)

הPIE הזה זה חרבנה, אם פייסבוק לא עושים פינות עגולות ל IE7/8 גם אתה יכול שלא

Ori The Man

22-07-12 21:47

ציטוט:

נכתב במקור על ידי בניה (פרסם 851939)

הPIE הזה זה חרבנה, אם פייסבוק לא עושים פינות עגולות ל IE7/8 גם אתה יכול שלא

חחחחח אז אתה ממליץ להוריד את זה?

Itay	22-07-12 23:20

אם יש לך רקע אחיד מאחורי התמונה, ובא לך להשקיע קצת בקוד אז אתה יכול ליצור פינות מעוגלות ל-IE 7/8 עם תמונה פשוט ואז לעטוף את התמונה ב-div עם position: relative ולהצמיד 4 spanים עם התמונות של הפינות המעוגלות לצדדים עם position: absolute

ואז כשאתה מחליף תמונה אתה משנה את הגודל של ה-div העוטף לפי התמונה החדשה וה-spanים נשארים צמודים לפינות

למרות שאני אישית לא הייתי טורח :)

Ori The Man

22-07-12 23:28

אני כניראה יוותר... חחחח

אתם מכירים דרך יצירתית לעשות דפים ע"י query?
אני רוצה להכניס 12 תמונות בעמוד,אני יכול ללכת על הדרך הרגילה והפשוטה עם GET אבל אני רוצה לנסות לעשות את זה עם jquery כדי שלא יהייה רענון בין עמוד לעמוד.
מכירים איזו שיטה טובה?

Itay	23-07-12 21:16

אותו דבר כמו שהיית עושה עם PHP+GET, רק שאת המעבר במקום לעשות עם קישור (למעשה, עדיף כן לעשות קישור אבל לדרוס את הפעולה שלו עם JS כדי שגוגל ודפדפנים בלי JS בעקרון יוכלו לעבור עמודים) לעשות עם בקשת ajax
ובהתחשב במה שהוספתי בהערה - הייתי מוסיף פרמטר לכתובת שאתה קורא אליה דרך ה-ajax שאומרת נגיד clean=true ואז מה שיוצג יהיה רק התוכן שאתה באמת צריך להחליף, ככה שגוגל לדוגמא יקרא את זה בלי ה-clean ויראה את כל האתר

perfeito

29-07-12 18:59

ציטוט:

נכתב במקור על ידי IgalSt (פרסם 851926)

קוד:

$('#Images').on("click", "img", function(){

        var img = $(this);

        var leftSide = $("#Left-Side");

        leftSide.fadeOut("slow", function(){

                 leftSide.fadeIn("slow");

                 $("#largeImage").attr('src', img.attr("src").replace("thumbs", "newsize"));

                 $("#description").html(img.attr("alt"));

        });

});

קוד:

function els () {

        var elems = {

                left: $('#Left-Side'),

                large: $('#largeImage'),

                desc: $('#description')

        };

        return (function () {

                return elems;

        }());

}



$('#Images').on("click", "img", function(){

        var self = $(this)

                ,        elems = els();



        elems.left.fadeOut('slow', function () {

                var src = self.attr('src').replace('thumbs', 'newsize');

                elems.left.fadeIn('slow');

                elems.large.attr('src', src);

                elems.html(self.attr('alt'));

        });

});

אם כבר, מדברים על מהירות :)

כל הזמנים הם GMT +2. הזמן כעת הוא 21:11.

עמוד 1 מתוך 2

הצג 40 הודעות באשכול על דף אחד