שלח תשובה

זירת השאלות

4125
צפיות
7
תשובות

צירוף slideshow לאתר

,‏ 30 בדצמבר, 2012

שלום לכולם,
הורדתי מהאתר hotscripts קובץ שמציג תמונות מתחלפות, אני רוצה לצרף אותו לאתר שאני בונה.
כיצד אני עושה זאת?
הקובץ מכיל תיקייה עם מסמכים ב PHP , JS , CSS ותיקיית תמונות.
אני כותב ב CSHTML , ומשתמש ב WEBMATRIX.
שמתי את התיקייה שהורדתי בתיקייה של האתר, מה ההמשך?
תודה מראש,
מושיקו.

תגיות:

7 תשובות

  1. דרור טל הגיב:

    יש קוד הרבה יותר פשוט מאשר להסתבך עם כל מיני קבצים.
    html:
    <div id="slideshow">
    <div>
    <img src="">
    </div>
    <div>
    <img src="">
    </div>
    </div>

    css:
    #slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    }

    #slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    }

    jquery:
    $("#slideshow > div:gt(0)").hide();

    setInterval(function() {
    $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
    }, 3000);

    div-אתה יכול להכניס כל מה שאתה רוצה בתוך ה

  2. moshikod הגיב:

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

  3. דרור טל הגיב:

    בטח שיש החלפה בין התמונות!
    צריך להכניס את קוד ה-jquery ככה
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js&quot<script>
    להכניס את קוד ה-Jquery
    </script>

  4. דרור טל הגיב:

    הקוד המלא יראה כך:

    <html>
    <head>
    <title></title>
    <style type="text/css">
    #slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    }

    #slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    }
    </style>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js&quot<script>
    $("#slideshow > div:gt(0)").hide();

    setInterval(function() {
    $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
    }, 3000);
    </script>
    </head>
    <body>
    <div id="slideshow">
    <div>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Biandintz_eta_zaldiak_-_modified2.jpg/250px-Biandintz_eta_zaldiak_-_modified2.jpg"&gt</div>
    <div>
    <img src="http://niranbd.com/newcity/vcitypics/905948/1916762206.jpg"&gt</div>
    </div>
    </body>
    </html>

  5. moshikod הגיב:

    תודה! עושה בעיות בסבב הראשון של התמונות, למשל אם יש 2 תמונות אז יש בעיה ב 2 החלפות הראשונות, אם יש 10 תמונות אז יש בעיה ב 10 החלפות הראשונות,
    כל פעם הוא מציג את התמונה האחרונה נגיד ויש 5 תמונות אז סדר ההצגה הוא כך:
    1-5-2-5-3-5-4-5-5-5-1-2-3-4-5
    ובסבב הראשון הוא לא מחכה אלא ישר עובמר תמונה.
    אבל אחרי זה עובד כמו שצריך!
    אשמח אם תוכל להגיד לי איפה הבעיה (כי יש לי 50 תמונות ולכן זה לא עובד טוב ב 50 ההחלפות הראשונות… קצת בעיה)
    בנוסף אשמח אם תסביר לי מה עושה השורה הבאה (והסבר קצר כללי על הפונקציה)
    #slideshow > div:first

  6. moshikod הגיב:

    האמת שאני ממש לא זוכר… זה היה ממש מזמן הזנחתי קצת את התחום…

שלח תשובה