PHP Image scrolling

Σε αυτή την περιοχή μπορείτε να βρείτε ή να αναζητήσετε πληροφορίες σχετικές με την PHP

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

Απάντηση
neogeo21
Δημοσιεύσεις: 20
Εγγραφή: 08 Μαρ 2012 02:02

PHP Image scrolling

Δημοσίευση από neogeo21 » 14 Αύγ 2012 17:23

Eχω ενα flash banner στο site μου απλά επειδή όπως είναι γνωστό δεν παιζει σε ipad και iphone συσκευές θα ήθελα να το αλλάξω σε κάποια άλλη μορφή php η javascript για να είναι λειτουργικό σε όλες τις συσκευές.
Το μόνο που έχω καταφέρει είναι να το κάνω απλή εικόνα αλλά το θέμα είναι πως υπάρχουν αλλές 4 φωτογραφίες και θα ήθελα να εμφανίζονται ανα 5 δευτερόλεπτα πχ. η μία μετά την άλλη. όπως γίνετε σε αυτό το site. www.mysims2go.com
Το banner είναι 710x339 υπάρχει μέσα σε div όπως βλέπετε και στο κώδικα κάτο
απλά είναι μια απλή στατική εικόνα. Αν μπορεί κάποιος να με βοηθήσει να το αλλάξω.
Ευχαριστώ πολύ.

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

<?php include&#40;'header.php'&#41;; ?>
<div id="banner"> 
<img src="../BCCD World/images/banner.jpg" width="710" height="339" />
</div>
    <div id="news">
    	<?php include&#40;'news.php'&#41;; ?>
    </div>
    <br class="clearfloat" />
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td class="column rightBorder">
                <div class="title">Solutions to Grow</div>
                <ul>
                	<li>Invest in your Ideas</li>
                	<li>Global expanding</li>
                  <li>Less is more</li>
                  <li>Increase Net Profit</li>
<li>Tax Planning</li>
                </ul>
            </td>
            <td class="column rightBorder">
                <div class="title">Coaching &amp; <br />
                Seminars</div>
                 <ul>
                	<li>Effectiveness</li>
                    <li>Creativity</li>
                    <li>Leadership</li>
                    <li>Enable Greatness</li>
                    <li>Wealth &amp; Health</li>
                </ul>
            </td>
            <td class="column rightBorder">
                <div class="title">Expand your <br />
                Business</div>
                 <ul>
                	<li>Find the right Persons</li>
                    <li>Find the right Partners</li>
                    <li>Innovation for solutions</li>
                   <li>Out of the Box</li>
                    <li>The NOW system </li>
            </ul></td>
            <td class="column">
                <div class="title">When you <br />
                need us</div>
            When you have an interesting Project, Product, Patent or Business Charisma and you need somebody to
            <ul>
              <li>Run it</li>
              <li>To invest in it</li>
              <li>To Inspire your team to expand</li>
            </ul>
            </td>
        </tr>
        <tr>
          <td class="column rightBorder">&nbsp;</td>
          <td class="column rightBorder">&nbsp;</td>
          <td class="column rightBorder">&nbsp;</td>
          <td class="column">&nbsp;</td>
        </tr>
        <tr>
          <td class="column rightBorder"><div class="more_btn"><a href="#">more</a></div></td>
          <td class="column rightBorder"><div class="more_btn"><a href="coaching.php?page=Coaching and Seminars">more</a></div></td>
          <td class="column rightBorder"><div class="more_btn"><a href="#">more</a></div></td>
          <td class="column"><div class="more_btn"><a href="whyus.php?page=Why us" target="_self">more</a></div></td>
        </tr>
    </table>
<?php include&#40;'footer.php'&#41;; ?>

gvre
Δημοσιεύσεις: 990
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

PHP Image scrolling

Δημοσίευση από gvre » 14 Αύγ 2012 18:53

Τα παρακάτω και όχι μόνο κάνουν αυτό που χρειάζεσαι.

http://bxslider.com/
http://nivo.dev7studios.com/

neogeo21
Δημοσιεύσεις: 20
Εγγραφή: 08 Μαρ 2012 02:02

PHP Image scrolling

Δημοσίευση από neogeo21 » 14 Αύγ 2012 19:07

το θέμα είναι πως η σελίδα μου είναι σε php και όχι σε html.
αν ήταν html θα γινόταν αυτό που λες αλλά σε php που θα τοποθετήσω το script για να λειτουργίσει το slider???

gvre
Δημοσιεύσεις: 990
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

PHP Image scrolling

Δημοσίευση από gvre » 14 Αύγ 2012 21:05

Με php θα τυπώσεις την html που χρειάζεται για να λειτουργήσει.

neogeo21
Δημοσιεύσεις: 20
Εγγραφή: 08 Μαρ 2012 02:02

PHP Image scrolling

Δημοσίευση από neogeo21 » 15 Αύγ 2012 02:16

δηλ θα φτιάξω την σελίδα κανονικά σαν html την κάνω save php και θα την φορτώνει όπως κάνει και με το header???

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

<?php include&#40;'header.php'&#41;; ?>
γιατί στη σελίδα όπως βλέπεις το header και το footer τα φορτώνει σαν εξωτερικά php
ενώ το banner είναι μέσα σε div.
Moυ φαίνετε κάπως μπερδεμένο όλο αυτό. δεν υπάρχει κάποιος άλλος τρόπος με κάποιο απλό script να γίνει η δουλειά. δεν θέλω τπτ τρελά πραγματα εφέ κλπ κλπ απλά να αλλάζουν 5 φωτογραφίες ανα κάθε 5 η 10 δευτερα. για να φανταστείς σκευτομουν να το κάνω με animated gif αλλά εκεί δεν είναι πολύ ερασιτεχνικό και χάνει σε ποιότητα[/code]

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

PHP Image scrolling

Δημοσίευση από korgr » 15 Αύγ 2012 02:42

Φίλε μου το πρόβλημά σου δεν είναι αυτό που θες να φτιάξεις, αλλά το να κατανοήσεις την διαφορά server side και client side.
Στο πρώτο ανήκουν η php και η mySQL. Αυτά εκτελούνται στον server και το αποτέλεσμα που προκύπτει (συνήθως HTML) σερβίρεται στον υπολογιστή του χρήστη.
Στο δεύτερο ανήκουν η HTML, η CSS και η Javascript. Aυτά αρχίζουν και εκτελούνται αφού φτάσουν στον υπολογιστή του χρήστη (πελάτης, εξ ου και client side).

Στο θέμα σου.
Σε όποιο σημείο θες να εμφανιστεί ο image slider, στο αρχείο php (είτε κύριο αρχείο, είτε κάποιο include), μπορείς να κόβεις την ροή της php με

?>

να βάζεις HTML, Javascript, CSS κλπ, και μετά να ξανά ανοίγεις την php με

<?php

και να συνεχιστεί ο php κώδικας.

Όπου κατεβάσεις τον slider που θες, θα έχει αναλυτικές οδηγίες για το σε ποια τμήματα του κώδικα πρέπει να βάλεις τι!
Όταν σου λέει στο <head>, βρες σε ποιο php βρίσκεται το δικό σου <head> και με τον τρόπο που σου εξήγησα, βάλε τον κώδικα...

Άβαταρ μέλους
jpk
Δημοσιεύσεις: 441
Εγγραφή: 09 Μαρ 2011 21:17

PHP Image scrolling

Δημοσίευση από jpk » 15 Αύγ 2012 12:55

Για να μην μπερδευόμαστε , η ερώτησή σου δεν έχει τίποτα να κάνει με PHP , ελπίζω την φράση που είπες «το θέμα είναι πως η σελίδα μου είναι σε php και όχι σε html.» να την θυμάσαι σε λίγο καιρό και να γελάς&#8230;. Εγώ σίγουρα θα την θυμάμαι και θα την χρησιμοποιήσω&#8230; Ψάξου λίγο με jQuery και το nivo όπως ειπώθηκε είναι αρκετά καλό &#8230; http://nivo.dev7studios.com/

neogeo21
Δημοσιεύσεις: 20
Εγγραφή: 08 Μαρ 2012 02:02

PHP Image scrolling

Δημοσίευση από neogeo21 » 15 Αύγ 2012 18:53

το έφτιαξα τελικά με πολύ καλό αποτέλεσμα. βρήκα και αναλυτικό βοηθημα μέσα στο forum.
http://www.freestuff.gr/forums/viewtopic.php?t=53367

Το μόνο θέμα πλέον είναι ότι ο χρόνος που αλλάζουν οι φωτογραφίες είναι αρκετά γρήγορος και δεν αλλάζει όπως μας γράφει ο φίλος στο βοηθημα του. Αλλάζω το pausetime το αυξάνω το μειώνο αλλά τπτ καμία αλλαγή στο banner. Ο χρόνος παραμένει το ίδιο. Tωρα η εγώ κάνω κάτι λάθος η υπάρχει κάποιο θέμα με το script και δεν λειτουργεί σωστά. Εδώ είναι και ο κώδικας του jQuery

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

/*
 * jQuery Nivo Slider v2.3
 * http&#58;//nivo.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http&#58;//www.opensource.org/licenses/mit-license.php
 * 
 * May 2010 - Pick random effect from specified set of effects by toronegro
 * May 2010 - controlNavThumbsFromRel option added by nerd-sh
 * May 2010 - Do not start nivoRun timer if there is only 1 slide by msielski
 * April 2010 - controlNavThumbs option added by Jamie Thompson &#40;http&#58;//jamiethompson.co.uk&#41;
 * March 2010 - manualAdvance option added by HelloPablo &#40;http&#58;//hellopablo.co.uk&#41;
 */

&#40;function&#40;$&#41; &#123;

    var NivoSlider = function&#40;element, options&#41;&#123;
		//Defaults are below
		var settings = $.extend&#40;&#123;&#125;, $.fn.nivoSlider.defaults, options&#41;;

        //Useful variables. Play carefully.
        var vars = &#123;
            currentSlide&#58; 0,
            currentImage&#58; '',
            totalSlides&#58; 0,
            randAnim&#58; '',
            running&#58; false,
            paused&#58; false,
            stop&#58;false
        &#125;;
    
        //Get this slider
        var slider = $&#40;element&#41;;
        slider.data&#40;'nivo&#58;vars', vars&#41;;
        slider.css&#40;'position','relative'&#41;;
        slider.addClass&#40;'nivoSlider'&#41;;
        
        //Find our slider children
        var kids = slider.children&#40;&#41;;
        kids.each&#40;function&#40;&#41; &#123;
            var child = $&#40;this&#41;;
            var link = '';
            if&#40;!child.is&#40;'img'&#41;&#41;&#123;
                if&#40;child.is&#40;'a'&#41;&#41;&#123;
                    child.addClass&#40;'nivo-imageLink'&#41;;
                    link = child;
                &#125;
                child = child.find&#40;'img&#58;first'&#41;;
            &#125;
            //Get img width & height
            var childWidth = child.width&#40;&#41;;
            if&#40;childWidth == 0&#41; childWidth = child.attr&#40;'width'&#41;;
            var childHeight = child.height&#40;&#41;;
            if&#40;childHeight == 0&#41; childHeight = child.attr&#40;'height'&#41;;
            //Resize the slider
            if&#40;childWidth > slider.width&#40;&#41;&#41;&#123;
                slider.width&#40;childWidth&#41;;
            &#125;
            if&#40;childHeight > slider.height&#40;&#41;&#41;&#123;
                slider.height&#40;childHeight&#41;;
            &#125;
            if&#40;link != ''&#41;&#123;
                link.css&#40;'display','none'&#41;;
            &#125;
            child.css&#40;'display','none'&#41;;
            vars.totalSlides++;
        &#125;&#41;;
        
        //Set startSlide
        if&#40;settings.startSlide > 0&#41;&#123;
            if&#40;settings.startSlide >= vars.totalSlides&#41; settings.startSlide = vars.totalSlides - 1;
            vars.currentSlide = settings.startSlide;
        &#125;
        
        //Get initial image
        if&#40;$&#40;kids&#91;vars.currentSlide&#93;&#41;.is&#40;'img'&#41;&#41;&#123;
            vars.currentImage = $&#40;kids&#91;vars.currentSlide&#93;&#41;;
        &#125; else &#123;
            vars.currentImage = $&#40;kids&#91;vars.currentSlide&#93;&#41;.find&#40;'img&#58;first'&#41;;
        &#125;
        
        //Show initial link
        if&#40;$&#40;kids&#91;vars.currentSlide&#93;&#41;.is&#40;'a'&#41;&#41;&#123;
            $&#40;kids&#91;vars.currentSlide&#93;&#41;.css&#40;'display','block'&#41;;
        &#125;
        
        //Set first background
        slider.css&#40;'background','url&#40;'+ vars.currentImage.attr&#40;'src'&#41; +'&#41; no-repeat'&#41;;
        
        //Add initial slices
        for&#40;var i = 0; i < settings.slices; i++&#41;&#123;
            var sliceWidth = Math.round&#40;slider.width&#40;&#41;/settings.slices&#41;;
            if&#40;i == settings.slices-1&#41;&#123;
                slider.append&#40;
                    $&#40;'<div class="nivo-slice"></div>'&#41;.css&#40;&#123; left&#58;&#40;sliceWidth*i&#41;+'px', width&#58;&#40;slider.width&#40;&#41;-&#40;sliceWidth*i&#41;&#41;+'px' &#125;&#41;
                &#41;;
            &#125; else &#123;
                slider.append&#40;
                    $&#40;'<div class="nivo-slice"></div>'&#41;.css&#40;&#123; left&#58;&#40;sliceWidth*i&#41;+'px', width&#58;sliceWidth+'px' &#125;&#41;
                &#41;;
            &#125;
        &#125;
        
        //Create caption
        slider.append&#40;
            $&#40;'<div class="nivo-caption"><p></p></div>'&#41;.css&#40;&#123; display&#58;'none', opacity&#58;settings.captionOpacity &#125;&#41;
        &#41;;			
        //Process initial  caption
        if&#40;vars.currentImage.attr&#40;'title'&#41; != ''&#41;&#123;
            var title = vars.currentImage.attr&#40;'title'&#41;;
            if&#40;title.substr&#40;0,1&#41; == '#'&#41; title = $&#40;title&#41;.html&#40;&#41;;
            $&#40;'.nivo-caption p', slider&#41;.html&#40;title&#41;;					
            $&#40;'.nivo-caption', slider&#41;.fadeIn&#40;settings.animSpeed&#41;;
        &#125;
        
        //In the words of Super Mario "let's a go!"
        var timer = 0;
        if&#40;!settings.manualAdvance && kids.length > 1&#41;&#123;
            timer = setInterval&#40;function&#40;&#41;&#123; nivoRun&#40;slider, kids, settings, false&#41;; &#125;, settings.pauseTime&#41;;
        &#125;

        //Add Direction nav
        if&#40;settings.directionNav&#41;&#123;
            slider.append&#40;'<div class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div>'&#41;;
            
            //Hide Direction nav
            if&#40;settings.directionNavHide&#41;&#123;
                $&#40;'.nivo-directionNav', slider&#41;.hide&#40;&#41;;
                slider.hover&#40;function&#40;&#41;&#123;
                    $&#40;'.nivo-directionNav', slider&#41;.show&#40;&#41;;
                &#125;, function&#40;&#41;&#123;
                    $&#40;'.nivo-directionNav', slider&#41;.hide&#40;&#41;;
                &#125;&#41;;
            &#125;
            
            $&#40;'a.nivo-prevNav', slider&#41;.live&#40;'click', function&#40;&#41;&#123;
                if&#40;vars.running&#41; return false;
                clearInterval&#40;timer&#41;;
                timer = '';
                vars.currentSlide-=2;
                nivoRun&#40;slider, kids, settings, 'prev'&#41;;
            &#125;&#41;;
            
            $&#40;'a.nivo-nextNav', slider&#41;.live&#40;'click', function&#40;&#41;&#123;
                if&#40;vars.running&#41; return false;
                clearInterval&#40;timer&#41;;
                timer = '';
                nivoRun&#40;slider, kids, settings, 'next'&#41;;
            &#125;&#41;;
        &#125;
        
        //Add Control nav
        if&#40;settings.controlNav&#41;&#123;
            var nivoControl = $&#40;'<div class="nivo-controlNav"></div>'&#41;;
            slider.append&#40;nivoControl&#41;;
            for&#40;var i = 0; i < kids.length; i++&#41;&#123;
                if&#40;settings.controlNavThumbs&#41;&#123;
                    var child = kids.eq&#40;i&#41;;
                    if&#40;!child.is&#40;'img'&#41;&#41;&#123;
                        child = child.find&#40;'img&#58;first'&#41;;
                    &#125;
                    if &#40;settings.controlNavThumbsFromRel&#41; &#123;
                        nivoControl.append&#40;'<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr&#40;'rel'&#41; + '" alt="" /></a>'&#41;;
                    &#125; else &#123;
                        nivoControl.append&#40;'<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr&#40;'src'&#41;.replace&#40;settings.controlNavThumbsSearch, settings.controlNavThumbsReplace&#41; +'" alt="" /></a>'&#41;;
                    &#125;
                &#125; else &#123;
                    nivoControl.append&#40;'<a class="nivo-control" rel="'+ i +'">'+ &#40;i + 1&#41; +'</a>'&#41;;
                &#125;
                
            &#125;
            //Set initial active link
            $&#40;'.nivo-controlNav a&#58;eq&#40;'+ vars.currentSlide +'&#41;', slider&#41;.addClass&#40;'active'&#41;;
            
            $&#40;'.nivo-controlNav a', slider&#41;.live&#40;'click', function&#40;&#41;&#123;
                if&#40;vars.running&#41; return false;
                if&#40;$&#40;this&#41;.hasClass&#40;'active'&#41;&#41; return false;
                clearInterval&#40;timer&#41;;
                timer = '';
                slider.css&#40;'background','url&#40;'+ vars.currentImage.attr&#40;'src'&#41; +'&#41; no-repeat'&#41;;
                vars.currentSlide = $&#40;this&#41;.attr&#40;'rel'&#41; - 1;
                nivoRun&#40;slider, kids, settings, 'control'&#41;;
            &#125;&#41;;
        &#125;
        
        //Keyboard Navigation
        if&#40;settings.keyboardNav&#41;&#123;
            $&#40;window&#41;.keypress&#40;function&#40;event&#41;&#123;
                //Left
                if&#40;event.keyCode == '37'&#41;&#123;
                    if&#40;vars.running&#41; return false;
                    clearInterval&#40;timer&#41;;
                    timer = '';
                    vars.currentSlide-=2;
                    nivoRun&#40;slider, kids, settings, 'prev'&#41;;
                &#125;
                //Right
                if&#40;event.keyCode == '39'&#41;&#123;
                    if&#40;vars.running&#41; return false;
                    clearInterval&#40;timer&#41;;
                    timer = '';
                    nivoRun&#40;slider, kids, settings, 'next'&#41;;
                &#125;
            &#125;&#41;;
        &#125;
        
        //For pauseOnHover setting
        if&#40;settings.pauseOnHover&#41;&#123;
            slider.hover&#40;function&#40;&#41;&#123;
                vars.paused = true;
                clearInterval&#40;timer&#41;;
                timer = '';
            &#125;, function&#40;&#41;&#123;
                vars.paused = false;
                //Restart the timer
                if&#40;timer == '' && !settings.manualAdvance&#41;&#123;
                    timer = setInterval&#40;function&#40;&#41;&#123; nivoRun&#40;slider, kids, settings, false&#41;; &#125;, settings.pauseTime&#41;;
                &#125;
            &#125;&#41;;
        &#125;
        
        //Event when Animation finishes
        slider.bind&#40;'nivo&#58;animFinished', function&#40;&#41;&#123; 
            vars.running = false; 
            //Hide child links
            $&#40;kids&#41;.each&#40;function&#40;&#41;&#123;
                if&#40;$&#40;this&#41;.is&#40;'a'&#41;&#41;&#123;
                    $&#40;this&#41;.css&#40;'display','none'&#41;;
                &#125;
            &#125;&#41;;
            //Show current link
            if&#40;$&#40;kids&#91;vars.currentSlide&#93;&#41;.is&#40;'a'&#41;&#41;&#123;
                $&#40;kids&#91;vars.currentSlide&#93;&#41;.css&#40;'display','block'&#41;;
            &#125;
            //Restart the timer
            if&#40;timer == '' && !vars.paused && !settings.manualAdvance&#41;&#123;
                timer = setInterval&#40;function&#40;&#41;&#123; nivoRun&#40;slider, kids, settings, false&#41;; &#125;, settings.pauseTime&#41;;
            &#125;
            //Trigger the afterChange callback
            settings.afterChange.call&#40;this&#41;;
        &#125;&#41;;

        // Private run method
		var nivoRun = function&#40;slider, kids, settings, nudge&#41;&#123;
			//Get our vars
			var vars = slider.data&#40;'nivo&#58;vars'&#41;;
            
            //Trigger the lastSlide callback
            if&#40;vars && &#40;vars.currentSlide == vars.totalSlides - 1&#41;&#41;&#123; 
				settings.lastSlide.call&#40;this&#41;;
			&#125;
            
            // Stop
			if&#40;&#40;!vars || vars.stop&#41; && !nudge&#41; return false;
			
			//Trigger the beforeChange callback
			settings.beforeChange.call&#40;this&#41;;
					
			//Set current background before change
			if&#40;!nudge&#41;&#123;
				slider.css&#40;'background','url&#40;'+ vars.currentImage.attr&#40;'src'&#41; +'&#41; no-repeat'&#41;;
			&#125; else &#123;
				if&#40;nudge == 'prev'&#41;&#123;
					slider.css&#40;'background','url&#40;'+ vars.currentImage.attr&#40;'src'&#41; +'&#41; no-repeat'&#41;;
				&#125;
				if&#40;nudge == 'next'&#41;&#123;
					slider.css&#40;'background','url&#40;'+ vars.currentImage.attr&#40;'src'&#41; +'&#41; no-repeat'&#41;;
				&#125;
			&#125;
			vars.currentSlide++;
            //Trigger the slideshowEnd callback
			if&#40;vars.currentSlide == vars.totalSlides&#41;&#123; 
				vars.currentSlide = 0;
				settings.slideshowEnd.call&#40;this&#41;;
			&#125;
			if&#40;vars.currentSlide < 0&#41; vars.currentSlide = &#40;vars.totalSlides - 1&#41;;
			//Set vars.currentImage
			if&#40;$&#40;kids&#91;vars.currentSlide&#93;&#41;.is&#40;'img'&#41;&#41;&#123;
				vars.currentImage = $&#40;kids&#91;vars.currentSlide&#93;&#41;;
			&#125; else &#123;
				vars.currentImage = $&#40;kids&#91;vars.currentSlide&#93;&#41;.find&#40;'img&#58;first'&#41;;
			&#125;
			
			//Set acitve links
			if&#40;settings.controlNav&#41;&#123;
				$&#40;'.nivo-controlNav a', slider&#41;.removeClass&#40;'active'&#41;;
				$&#40;'.nivo-controlNav a&#58;eq&#40;'+ vars.currentSlide +'&#41;', slider&#41;.addClass&#40;'active'&#41;;
			&#125;
			
			//Process caption
			if&#40;vars.currentImage.attr&#40;'title'&#41; != ''&#41;&#123;
                var title = vars.currentImage.attr&#40;'title'&#41;;
                if&#40;title.substr&#40;0,1&#41; == '#'&#41; title = $&#40;title&#41;.html&#40;&#41;;	
                    
				if&#40;$&#40;'.nivo-caption', slider&#41;.css&#40;'display'&#41; == 'block'&#41;&#123;
					$&#40;'.nivo-caption p', slider&#41;.fadeOut&#40;settings.animSpeed, function&#40;&#41;&#123;
						$&#40;this&#41;.html&#40;title&#41;;
						$&#40;this&#41;.fadeIn&#40;settings.animSpeed&#41;;
					&#125;&#41;;
				&#125; else &#123;
					$&#40;'.nivo-caption p', slider&#41;.html&#40;title&#41;;
				&#125;					
				$&#40;'.nivo-caption', slider&#41;.fadeIn&#40;settings.animSpeed&#41;;
			&#125; else &#123;
				$&#40;'.nivo-caption', slider&#41;.fadeOut&#40;settings.animSpeed&#41;;
			&#125;
			
			//Set new slice backgrounds
			var  i = 0;
			$&#40;'.nivo-slice', slider&#41;.each&#40;function&#40;&#41;&#123;
				var sliceWidth = Math.round&#40;slider.width&#40;&#41;/settings.slices&#41;;
				$&#40;this&#41;.css&#40;&#123; height&#58;'0px', opacity&#58;'0', 
					background&#58; 'url&#40;'+ vars.currentImage.attr&#40;'src'&#41; +'&#41; no-repeat -'+ &#40;&#40;sliceWidth + &#40;i * sliceWidth&#41;&#41; - sliceWidth&#41; +'px 0%' &#125;&#41;;
				i++;
			&#125;&#41;;
			
			if&#40;settings.effect == 'random'&#41;&#123;
				var anims = new Array&#40;"sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade"&#41;;
				vars.randAnim = anims&#91;Math.floor&#40;Math.random&#40;&#41;*&#40;anims.length + 1&#41;&#41;&#93;;
				if&#40;vars.randAnim == undefined&#41; vars.randAnim = 'fade';
			&#125;
            
            //Run random effect from specified set &#40;eg&#58; effect&#58;'fold,fade'&#41;
            if&#40;settings.effect.indexOf&#40;','&#41; != -1&#41;&#123;
                var anims = settings.effect.split&#40;','&#41;;
                vars.randAnim = $.trim&#40;anims&#91;Math.floor&#40;Math.random&#40;&#41;*anims.length&#41;&#93;&#41;;
            &#125;
		
			//Run effects
			vars.running = true;
			if&#40;settings.effect == 'sliceDown' || settings.effect == 'sliceDownRight' || vars.randAnim == 'sliceDownRight' ||
				settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft'&#41;&#123;
				var timeBuff = 0;
				var i = 0;
				var slices = $&#40;'.nivo-slice', slider&#41;;
				if&#40;settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft'&#41; slices = $&#40;'.nivo-slice', slider&#41;._reverse&#40;&#41;;
				slices.each&#40;function&#40;&#41;&#123;
					var slice = $&#40;this&#41;;
					slice.css&#40;'top','0px'&#41;;
					if&#40;i == settings.slices-1&#41;&#123;
						setTimeout&#40;function&#40;&#41;&#123;
							slice.animate&#40;&#123; height&#58;'100%', opacity&#58;'1.0' &#125;, settings.animSpeed, '', function&#40;&#41;&#123; slider.trigger&#40;'nivo&#58;animFinished'&#41;; &#125;&#41;;
						&#125;, &#40;100 + timeBuff&#41;&#41;;
					&#125; else &#123;
						setTimeout&#40;function&#40;&#41;&#123;
							slice.animate&#40;&#123; height&#58;'100%', opacity&#58;'1.0' &#125;, settings.animSpeed&#41;;
						&#125;, &#40;100 + timeBuff&#41;&#41;;
					&#125;
					timeBuff += 50;
					i++;
				&#125;&#41;;
			&#125; 
			else if&#40;settings.effect == 'sliceUp' || settings.effect == 'sliceUpRight' || vars.randAnim == 'sliceUpRight' ||
					settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft'&#41;&#123;
				var timeBuff = 0;
				var i = 0;
				var slices = $&#40;'.nivo-slice', slider&#41;;
				if&#40;settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft'&#41; slices = $&#40;'.nivo-slice', slider&#41;._reverse&#40;&#41;;
				slices.each&#40;function&#40;&#41;&#123;
					var slice = $&#40;this&#41;;
					slice.css&#40;'bottom','0px'&#41;;
					if&#40;i == settings.slices-1&#41;&#123;
						setTimeout&#40;function&#40;&#41;&#123;
							slice.animate&#40;&#123; height&#58;'100%', opacity&#58;'1.0' &#125;, settings.animSpeed, '', function&#40;&#41;&#123; slider.trigger&#40;'nivo&#58;animFinished'&#41;; &#125;&#41;;
						&#125;, &#40;100 + timeBuff&#41;&#41;;
					&#125; else &#123;
						setTimeout&#40;function&#40;&#41;&#123;
							slice.animate&#40;&#123; height&#58;'100%', opacity&#58;'1.0' &#125;, settings.animSpeed&#41;;
						&#125;, &#40;100 + timeBuff&#41;&#41;;
					&#125;
					timeBuff += 50;
					i++;
				&#125;&#41;;
			&#125; 
			else if&#40;settings.effect == 'sliceUpDown' || settings.effect == 'sliceUpDownRight' || vars.randAnim == 'sliceUpDown' || 
					settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft'&#41;&#123;
				var timeBuff = 0;
				var i = 0;
				var v = 0;
				var slices = $&#40;'.nivo-slice', slider&#41;;
				if&#40;settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft'&#41; slices = $&#40;'.nivo-slice', slider&#41;._reverse&#40;&#41;;
				slices.each&#40;function&#40;&#41;&#123;
					var slice = $&#40;this&#41;;
					if&#40;i == 0&#41;&#123;
						slice.css&#40;'top','0px'&#41;;
						i++;
					&#125; else &#123;
						slice.css&#40;'bottom','0px'&#41;;
						i = 0;
					&#125;
					
					if&#40;v == settings.slices-1&#41;&#123;
						setTimeout&#40;function&#40;&#41;&#123;
							slice.animate&#40;&#123; height&#58;'100%', opacity&#58;'1.0' &#125;, settings.animSpeed, '', function&#40;&#41;&#123; slider.trigger&#40;'nivo&#58;animFinished'&#41;; &#125;&#41;;
						&#125;, &#40;100 + timeBuff&#41;&#41;;
					&#125; else &#123;
						setTimeout&#40;function&#40;&#41;&#123;
							slice.animate&#40;&#123; height&#58;'100%', opacity&#58;'1.0' &#125;, settings.animSpeed&#41;;
						&#125;, &#40;100 + timeBuff&#41;&#41;;
					&#125;
					timeBuff += 50;
					v++;
				&#125;&#41;;
			&#125; 
			else if&#40;settings.effect == 'fold' || vars.randAnim == 'fold'&#41;&#123;
				var timeBuff = 0;
				var i = 0;
				$&#40;'.nivo-slice', slider&#41;.each&#40;function&#40;&#41;&#123;
					var slice = $&#40;this&#41;;
					var origWidth = slice.width&#40;&#41;;
					slice.css&#40;&#123; top&#58;'0px', height&#58;'100%', width&#58;'0px' &#125;&#41;;
					if&#40;i == settings.slices-1&#41;&#123;
						setTimeout&#40;function&#40;&#41;&#123;
							slice.animate&#40;&#123; width&#58;origWidth, opacity&#58;'1.0' &#125;, settings.animSpeed, '', function&#40;&#41;&#123; slider.trigger&#40;'nivo&#58;animFinished'&#41;; &#125;&#41;;
						&#125;, &#40;100 + timeBuff&#41;&#41;;
					&#125; else &#123;
						setTimeout&#40;function&#40;&#41;&#123;
							slice.animate&#40;&#123; width&#58;origWidth, opacity&#58;'1.0' &#125;, settings.animSpeed&#41;;
						&#125;, &#40;100 + timeBuff&#41;&#41;;
					&#125;
					timeBuff += 50;
					i++;
				&#125;&#41;;
			&#125;  
			else if&#40;settings.effect == 'fade' || vars.randAnim == 'fade'&#41;&#123;
				var i = 0;
				$&#40;'.nivo-slice', slider&#41;.each&#40;function&#40;&#41;&#123;
					$&#40;this&#41;.css&#40;'height','100%'&#41;;
					if&#40;i == settings.slices-1&#41;&#123;
						$&#40;this&#41;.animate&#40;&#123; opacity&#58;'1.0' &#125;, &#40;settings.animSpeed*2&#41;, '', function&#40;&#41;&#123; slider.trigger&#40;'nivo&#58;animFinished'&#41;; &#125;&#41;;
					&#125; else &#123;
						$&#40;this&#41;.animate&#40;&#123; opacity&#58;'1.0' &#125;, &#40;settings.animSpeed*2&#41;&#41;;
					&#125;
					i++;
				&#125;&#41;;
			&#125;
		&#125;
        
        // For debugging
        var trace = function&#40;msg&#41;&#123;
            if &#40;this.console && typeof console.log != "undefined"&#41;
                console.log&#40;msg&#41;;
        &#125;
        
        // Start / Stop
        this.stop = function&#40;&#41;&#123;
            if&#40;!$&#40;element&#41;.data&#40;'nivo&#58;vars'&#41;.stop&#41;&#123;
                $&#40;element&#41;.data&#40;'nivo&#58;vars'&#41;.stop = true;
                trace&#40;'Stop Slider'&#41;;
            &#125;
        &#125;
        
        this.start = function&#40;&#41;&#123;
            if&#40;$&#40;element&#41;.data&#40;'nivo&#58;vars'&#41;.stop&#41;&#123;
                $&#40;element&#41;.data&#40;'nivo&#58;vars'&#41;.stop = false;
                trace&#40;'Start Slider'&#41;;
            &#125;
        &#125;
        
        //Trigger the afterLoad callback
        settings.afterLoad.call&#40;this&#41;;
    &#125;;
        
    $.fn.nivoSlider = function&#40;options&#41; &#123;
    
        return this.each&#40;function&#40;&#41;&#123;
            var element = $&#40;this&#41;;
            // Return early if this element already has a plugin instance
            if &#40;element.data&#40;'nivoslider'&#41;&#41; return;
            // Pass options to plugin constructor
            var nivoslider = new NivoSlider&#40;this, options&#41;;
            // Store plugin object in this element's data
            element.data&#40;'nivoslider', nivoslider&#41;;
        &#125;&#41;;

	&#125;;
	
	//Default settings
	$.fn.nivoSlider.defaults = &#123;
		effect&#58;'random',
		slices&#58;15,
		animSpeed&#58;500,
		pauseTime&#58;5000,
		startSlide&#58;0,
		directionNav&#58;true,
		directionNavHide&#58;true,
		controlNav&#58;true,
		controlNavThumbs&#58;false,
        controlNavThumbsFromRel&#58;false,
		controlNavThumbsSearch&#58;'.jpg',
		controlNavThumbsReplace&#58;'_thumb.jpg',
		keyboardNav&#58;true,
		pauseOnHover&#58;true,
		manualAdvance&#58;false,
		captionOpacity&#58;0.8,
		beforeChange&#58; function&#40;&#41;&#123;&#125;,
		afterChange&#58; function&#40;&#41;&#123;&#125;,
		slideshowEnd&#58; function&#40;&#41;&#123;&#125;,
        lastSlide&#58; function&#40;&#41;&#123;&#125;,
        afterLoad&#58; function&#40;&#41;&#123;&#125;
	&#125;;
	
	$.fn._reverse = &#91;&#93;.reverse;
	
&#125;&#41;&#40;jQuery&#41;;

neogeo21
Δημοσιεύσεις: 20
Εγγραφή: 08 Μαρ 2012 02:02

PHP Image scrolling

Δημοσίευση από neogeo21 » 15 Αύγ 2012 18:54

:D

gvre
Δημοσιεύσεις: 990
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

PHP Image scrolling

Δημοσίευση από gvre » 15 Αύγ 2012 19:54

Για να αλλάζουν πχ κάθε 5" οι εικόνες, θα πρέπει να περάσεις το παρακάτω option όταν καλείς το script.

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

$&#40;'#slider'&#41;.nivoSlider&#40;&#123; pauseTime&#58; 5000 &#125;&#41;;
Περισσότερα μπορείς να βρεις στις οδηγίες χρήσης του plugin, στη διεύθυνση http://nivo.dev7studios.com/support/jqu ... gin-usage/

neogeo21
Δημοσιεύσεις: 20
Εγγραφή: 08 Μαρ 2012 02:02

PHP Image scrolling

Δημοσίευση από neogeo21 » 15 Αύγ 2012 21:12

Σευχαριστώ πολύ. Το έκανα και λειτουργεί.
Αν και περίεργo γιατί απότι και είδα απο το βοήθημα δεν γράφει για κάτι τέτοιο. Σου λέει ότι τις ρυθμίσεις τις κάνεις από το jQuery.
Nα ρωτήσω και κάτι άλλο μπορείς να κάνεις αλλαγές στους χρόνους πχ. η πρώτη εικόνα να παραμένει 5 sec. η δευτερη 10 η τρίτη 15 κλπ κλπ.???
η έχει μια ρύθμιση για όλες τις εικόνες...

gvre
Δημοσιεύσεις: 990
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

PHP Image scrolling

Δημοσίευση από gvre » 15 Αύγ 2012 21:34

Από το βοήθημα:
The Nivo Slider has plenty of options to fiddle with. Below is an example of the code with all available options and their defaults:

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

<script type="text/javascript">
$&#40;window&#41;.load&#40;function&#40;&#41; &#123;
    $&#40;'#slider'&#41;.nivoSlider&#40;&#123;
        effect&#58; 'random', // Specify sets like&#58; 'fold,fade,sliceDown'
        slices&#58; 15, // For slice animations
        boxCols&#58; 8, // For box animations
        boxRows&#58; 4, // For box animations
        animSpeed&#58; 500, // Slide transition speed
        pauseTime&#58; 3000, // How long each slide will show
        startSlide&#58; 0, // Set starting Slide &#40;0 index&#41;
        directionNav&#58; true, // Next & Prev navigation
        directionNavHide&#58; true, // Only show on hover
        controlNav&#58; true, // 1,2,3... navigation
        controlNavThumbs&#58; false, // Use thumbnails for Control Nav
        pauseOnHover&#58; true, // Stop animation while hovering
        manualAdvance&#58; false, // Force manual transitions
        prevText&#58; 'Prev', // Prev directionNav text
        nextText&#58; 'Next', // Next directionNav text
        randomStart&#58; false, // Start on a random slide
        beforeChange&#58; function&#40;&#41;&#123;&#125;, // Triggers before a slide transition
        afterChange&#58; function&#40;&#41;&#123;&#125;, // Triggers after a slide transition
        slideshowEnd&#58; function&#40;&#41;&#123;&#125;, // Triggers after all slides have been shown
        lastSlide&#58; function&#40;&#41;&#123;&#125;, // Triggers when last slide is shown
        afterLoad&#58; function&#40;&#41;&#123;&#125; // Triggers when slider has loaded
    &#125;&#41;;
&#125;&#41;;
</script>
Δεν ξέρω αν το nivo υποστηρίζει κάτι τέτοιο. Δε μου έχει χρειαστεί ποτέ και δεν το έχω ψάξει.

Απάντηση

Επιστροφή στο “PHP Προγραμματισμός”

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

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