TYPO3 Reea Blog

This will be shown to users with no Flash or Javascript.

FCE - slider imagini cu jquery

În acest articol se prezintă  creare unui slider de imagini dinamic typo3 folosind jquery şi un flexible content element (fce).

Se crează fce-ul , care conţine un element de tip "Image field". Intrucât, by default în cadrul unui element de tip "Image field", se poate încărca o singură imagine, este nevoie de a face anumite setări în xml-ul aferent mapării templavoila şi anume:

<maxitems>1</maxitems>

Se înlocuieşte "1" cu numărul maxim de imagini care se doresc a fi încărcate.

Ex :
<maxitems>10</maxitems>

 

De asemenea codul typoscript default la crearea unui element de tip "Image field" şi anume :


10 = IMAGE
10.file.import = uploads/tx_templavoila/
10.file.import.current = 1
10.file.import.listNum = 0
10.file.maxW = 200

este folosit pentru a afişa prima imagine încărcată în acest fce.

Întrucât se doreşte afişarea dinamică a imaginilor încărcate se va înlocui acest typoscript cu :


10 = COA
10{

    10 = HTML
    10 {
        value.field = slider_images
        value.split {
                    token = ,
                    cObjNum = 1
                    1 {
                       10 = IMAGE  
                       10.stdWrap.wrap = |                        
	               10 {
                           file {
                                 import.current = 1
                                 import = uploads/tx_templavoila/
                                 maxW = 556
                                 maxH = 356
                                 }
                            }                                        
	      		}                                    
                    }
       }                            
   }

Acum urmează includerea fişierelor javascript care se folosesc pentru creare slider-ului. Astfel în template-ul site-ului se includ aceste fişiere folosind varianta page.headerData.


page.headerData.300 = HTML
page.headerData.300.value(

    <link rel="stylesheet" href="fileadmin/template/js/anything_slider/slider.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="fileadmin/template/js/anything_slider/jquery.easing.1.2.js"></script>
    <script src="fileadmin/template/js/anything_slider/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
    
        function formatText(index, panel) {
		  return index + "";
	    }
    
        $(function () {
        
            $('.anythingSlider').anythingSlider({
                easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
                autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
                delay: 2500,                    // How long between slide transitions in AutoPlay mode
                startStopped: false,            // If autoPlay is on, this can force it to start stopped
                animationTime: 600,             // How long the slide transition takes
                hashTags: true,                 // Should links change the hashtag in the URL?
                buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
        		pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
        		startText: "Go",             // Start text
		        stopText: "Stop",               // Stop text
		        navigationFormatter: formatText       // Details at the top of the file on this use (advanced use)
            });
            
            $("#slide-jump").click(function(){
                $('.anythingSlider').anythingSlider(6);
            });
            
        });
    </script>

)

Pentru buna funcţionare a slider-ului mai este nevoie încadrarea imaginilor in div-uri care cărora li se aplică anumite clase. Acestea se adaugă în codul typoscript al fce-ului, adăugându-se obiectul 10.5 şi 10.15; astfel codul nostru typoscript va arăta în felul următor:


10 = COA
10{
    5 = HTML
    5.value = <div class="anythingSlider"><div class="wrapper"><ul>

    10 = HTML
    10 {
        value.field = slider_images
        value.split {
                    token = ,
                    cObjNum = 1
                    1 {
                       10 = IMAGE  
                       10.stdWrap.wrap = <li>|</li>                        
		       10 {
                           file {
                                 import.current = 1
                                 import = uploads/tx_templavoila/
                                 maxW = 556
                                 maxH = 356
                                 }
                           }                                        
			}                                    
                    }
       }                            
	
    15 = HTML
    15.value = </ul></div></div>
}

 

DEMO

 

blog comments powered by Disqus

In aceasta sectiune

Scripturi folosite uzual pentru configurarea site-urilor. Pentru orice referinta noua, sau comentariu, se poate folosi zona de page coments a fiecarei pagini, sau puteti trimite un email la adresa calin@reea.net.

Premium Sponsor

TYPO3camp Mallorca 14/09/12-16/09/12