Αλλαγή στις εικόνες του slide, με refresh

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
DrJim
Δημοσιεύσεις: 459
Εγγραφή: 27 Ιαν 2006 13:30
Τοποθεσία: MY COSMOS

Αλλαγή στις εικόνες του slide, με refresh

Δημοσίευση από DrJim » 28 Μαρ 2012 13:16

Χρησιμοποιώ αυτό το Photo gallery http://jonraasch.com/blog/a-simple-jquery-slideshow και ηθελα να μου πείτε τον τρόπο για πχ:

όταν πηγαίνω από σελίδα σε σελίδα να ξεκινάει με την επόμενη φώτο.
http://www.travelpassion.gr - Travel News Online

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Αλλαγή στις εικόνες του slide, με refresh

Δημοσίευση από alou » 28 Μαρ 2012 14:07

-edited- δες παρακάτω
Τελευταία επεξεργασία από το μέλος alou την 28 Μαρ 2012 14:19, έχει επεξεργασθεί 1 φορά συνολικά.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Αλλαγή στις εικόνες του slide, με refresh

Δημοσίευση από alou » 28 Μαρ 2012 14:16

Είχα κάνει κάποιο λάθος πριν οπότε δες αυτό καλύτερα:

Κώδικας: Επιλογή όλων

$(document).ready(function(){

//εξω από το function, δηλώνεις κάποιο image me active class
     var randomNum = Math.ceil(Math.random()*4) - 1; //ενας τυχαίος αριθμός από το 0 ως το 3 για να χρησιμοποιήσεις στην επιλογή εικόνας, που ξεκινάει από το 0. Υποθέτω εδώ ότι έχεις 4 εικόνες, το αλλάζεις αναλόγως
     $('#slideshow IMG:eq(randomNum)').addClass('active'); //παίρνεις την Χ στη σειρά εικόνα και της βάζεις class active
//εδώ βάλε να παίζει το funtcion tou slideshow

})
Στην html δεν θα δηλώσεις active class σε κανένα img.

Άβαταρ μέλους
DrJim
Δημοσιεύσεις: 459
Εγγραφή: 27 Ιαν 2006 13:30
Τοποθεσία: MY COSMOS

Αλλαγή στις εικόνες του slide, με refresh

Δημοσίευση από DrJim » 28 Μαρ 2012 16:01

Σε ευχαριστώ για την απάντηση σου.

Αν έχουμε αυτό:

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>

<title>Simple jQuery Slideshow from JonRaasch.com</title>

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript">

/*** 
    Simple jQuery Slideshow Script
    Released by Jon Raasch &#40;jonraasch.com&#41; under FreeBSD license&#58; free to use or modify, not responsible for anything, etc.  Please link out to me if you like it &#58;&#41;
***/

function slideSwitch&#40;&#41; &#123;
    var $active = $&#40;'#slideshow IMG.active'&#41;;

    if &#40; $active.length == 0 &#41; $active = $&#40;'#slideshow IMG&#58;last'&#41;;

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next&#40;&#41;.length ? $active.next&#40;&#41;
        &#58; $&#40;'#slideshow IMG&#58;first'&#41;;

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings&#40;&#41;;
    // var rndNum = Math.floor&#40;Math.random&#40;&#41; * $sibs.length &#41;;
    // var $next  = $&#40; $sibs&#91; rndNum &#93; &#41;;


    $active.addClass&#40;'last-active'&#41;;

    $next.css&#40;&#123;opacity&#58; 0.0&#125;&#41;
        .addClass&#40;'active'&#41;
        .animate&#40;&#123;opacity&#58; 1.0&#125;, 1000, function&#40;&#41; &#123;
            $active.removeClass&#40;'active last-active'&#41;;
        &#125;&#41;;
&#125;

$&#40;function&#40;&#41; &#123;
    setInterval&#40; "slideSwitch&#40;&#41;", 5000 &#41;;
&#125;&#41;;

</script>

<style type="text/css">

/*** set the width and height to match your images **/

#slideshow &#123;
    position&#58;relative;
    height&#58;350px;
&#125;

#slideshow IMG &#123;
    position&#58;absolute;
    top&#58;0;
    left&#58;0;
    z-index&#58;8;
    opacity&#58;0.0;
&#125;

#slideshow IMG.active &#123;
    z-index&#58;10;
    opacity&#58;1.0;
&#125;

#slideshow IMG.last-active &#123;
    z-index&#58;9;
&#125;

</style>

</head>

<body style="font-family&#58; Arial, Sans-serif, sans;">

<!-- this will work with any number of images -->
<!-- set the active class on whichever image you want to show up as the default 
&#40;otherwise this will be the last image&#41; -->

<div id="slideshow">
    <img src="image1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="image2.jpg" alt="Slideshow Image 2" />
    <img src="image3.jpg" alt="Slideshow Image 3" />
    <img src="image4.jpg" alt="Slideshow Image 4" />
</div>

</body>
</html>
Πως θα γίνει ακριβώς? sorry αλλά δεν μου βγήκε!!

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Αλλαγή στις εικόνες του slide, με refresh

Δημοσίευση από alou » 28 Μαρ 2012 16:51

Μέσα στον παραπάνω κώδικα, ο άνθρωπος που το έφτιαξε σου λέει:

Κώδικας: Επιλογή όλων

// uncomment the 3 lines below to pull the images in random order
   
    // var $sibs  = $active.siblings&#40;&#41;;
    // var rndNum = Math.floor&#40;Math.random&#40;&#41; * $sibs.length &#41;;
    // var $next  = $&#40; $sibs&#91; rndNum &#93; &#41;; 
το δοκίμασες;

Άβαταρ μέλους
DrJim
Δημοσιεύσεις: 459
Εγγραφή: 27 Ιαν 2006 13:30
Τοποθεσία: MY COSMOS

Αλλαγή στις εικόνες του slide, με refresh

Δημοσίευση από DrJim » 29 Μαρ 2012 09:27

Ναι το έχω δοκιμάσει αλλά δεν ξεκινάει με διαφορετική φώτο, ξεκινάει με την ίδια και τις επόμενες τις κάνει random!!
Εγω θέλω να κάνει random και την πρώτη!! :-?
http://www.travelpassion.gr - Travel News Online

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Αλλαγή στις εικόνες του slide, με refresh

Δημοσίευση από alou » 29 Μαρ 2012 15:35

Για δοκίμασέ το έτσι

Κώδικας: Επιλογή όλων

<script type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123; 

    var $eikones = $&#40;'#slideshow IMG'&#41;;
    var rndNum = Math.floor&#40;Math.random&#40;&#41; * $eikones.length &#41;;
    var $makeactive = $&#40; $eikones&#91; rndNum &#93; &#41;;
    $makeactive.addClass&#40;'active'&#41;;
&#125;&#41;

/***
    Simple jQuery Slideshow Script
    Released by Jon Raasch &#40;jonraasch.com&#41; under FreeBSD license&#58; free to use or modify, not responsible for anything, etc.  Please link out to me if you like it &#58;&#41;
***/

function slideSwitch&#40;&#41; &#123;
    var $active = $&#40;'#slideshow IMG.active'&#41;;

    if &#40; $active.length == 0 &#41; $active = $&#40;'#slideshow IMG&#58;last'&#41;;

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next&#40;&#41;.length ? $active.next&#40;&#41;
        &#58; $&#40;'#slideshow IMG&#58;first'&#41;;

    // uncomment the 3 lines below to pull the images in random order
   
    // var $sibs  = $active.siblings&#40;&#41;;
    // var rndNum = Math.floor&#40;Math.random&#40;&#41; * $sibs.length &#41;;
    // var $next  = $&#40; $sibs&#91; rndNum &#93; &#41;;


    $active.addClass&#40;'last-active'&#41;;

    $next.css&#40;&#123;opacity&#58; 0.0&#125;&#41;
        .addClass&#40;'active'&#41;
        .animate&#40;&#123;opacity&#58; 1.0&#125;, 1000, function&#40;&#41; &#123;
            $active.removeClass&#40;'active last-active'&#41;;
        &#125;&#41;;
&#125;

$&#40;function&#40;&#41; &#123;
    setInterval&#40; "slideSwitch&#40;&#41;", 5000 &#41;;
&#125;&#41;;


</script>
και στις εικόνες, μην βάλεις σε καμμία class=active στην html.

Άβαταρ μέλους
DrJim
Δημοσιεύσεις: 459
Εγγραφή: 27 Ιαν 2006 13:30
Τοποθεσία: MY COSMOS

Αλλαγή στις εικόνες του slide, με refresh

Δημοσίευση από DrJim » 30 Μαρ 2012 13:30

Σε ευχαριστώ πολύ!!!!!
http://www.travelpassion.gr - Travel News Online

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης