[naggison]

Hallo liebes Forum,

ich habe da ein Problem...
Ich bin gerade dabei eine Seite aufzubereiten die nicht von mir programmiert ist.

Ich habe ein js carousel basierend auf jquery. Die Inhalte des Carousels werden mit PHP eingelesen und die datei selbst ist deswegen die "slider.php".
Nun ist das bei dieser T3 Seite so, dass ich verschiedene Templates als .html Dateien in /fileadmin/templates habe. Dieser slider soll nur auf der Startseite erscheinen welches sein eigenes Template hat. Ich habe verschiedenes ausprobiert:

• Slider direkt in das Template einbauen - Resultat: JS greift nicht. Moeglicherweise weil T3Mootools installiert ist.

• JS + PHP in den Editor bei T3 eingefügt - Resultat: geht natuerlich auch ueberhaupt nicht.

• Eine externe Seite mit dem Script anlegen und in T3 im Editor einen iframe anlegen:

<div><iframe src="http://www.xxx.de/slider/slider.php" style="overflow: hidden; height: 400px; width: 250px; border: 0px;"></iframe></div> 

- Resultat: Geht! ... nur nicht in Firefox 3.x

Firebug zeigt mir folgendes an: http://naggison.de/t3fb.jpg

Am liebsten wäre es mir natuerlich ich koennte direkt per include im template selbst was machen! Oder ggf. den Slider direkt in das Template einbauen! Das waere natuerlich das beste.

Gibts da nen Trick, ne Idee oder sonst irgendwas? Mir wuerde es ehrlich gesagt auch reichen wenn es mit nem iframe geht! Das ist okay in den anderen Browsern jedoch leider nicht im FF.

Wuerde mich freuen wenn ich bald eine Antwort bekaeme.

Vielen Dank,

naggison

[DoMiNiK2]

Wenn es Probleme gibt mit der Mootools-Bibliothek, musst bzw. kannst du JQuery in den "noconflict"-Modus schalten - siehe jQuery noConflict Mode | mysrc.de
Hoffe das hilft ;).

[naggison]

Zitat von DoMiNiK2

Wenn es Probleme gibt mit der Mootools-Bibliothek, musst bzw. kannst du JQuery in den "noconflict"-Modus schalten - siehe jQuery noConflict Mode | mysrc.de
Hoffe das hilft ;).

Reicht es denn dann wenn ich das xyz.html template habe und meinen ganze code einbinde, das jQuery.noConflict(); oben drüber zu schreiben?!


hat nicht geklappt!

[DoMiNiK2]

jQuery.noConflict(); alleine ist zu wenig ;)). Aber ist doch ein schönes Beispiel da? Ansonsten empfiehlt es sich, dass du mal den JS-Code, den du verwendest (am besten kennzeichnen, ob hier jQuery oder Mootools verwendet wird), mal hier reinkopierst...

[naggison]

Zitat von DoMiNiK2

jQuery.noConflict(); alleine ist zu wenig ;)). Aber ist doch ein schönes Beispiel da? Ansonsten empfiehlt es sich, dass du mal den JS-Code, den du verwendest (am besten kennzeichnen, ob hier jQuery oder Mootools verwendet wird), mal hier reinkopierst...

Okay, ist mal die code snippets:

jquery (extern)

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

Steuerung (jquery)

 <script>
    $(document).ready(function(){
    $('ul').bxCarousel({
        display_num: 1,       // number of elements to be visible
        move: 1,              // number of elements to the shift the slides
        speed: 500,           // number in milliseconds it takes to finish slide animation
        margin:0,             // right margin to be applied to each <li> element (in pixels, although do not include "px")
        auto: false,          // automatically play slides without a user click
        auto_interval: 5000,  // the amount of time in milliseconds between each auto animation
        //auto_dir: 'next',     // direction of auto slideshow (options: 'next', 'prev')
        auto_hover: true,    // determines if the slideshow will stop when user hovers over slideshow
        //next_text: 'next',    // text to be used for the 'next' control
        //next_image: '',       // image to be used for the 'next' control
        //prev_text: 'prev',    // text to be used for the 'prev' control
        //prev_image: '',       // image to be used for the 'prev' control
        //controls: true        // determines if controls will be displayed
    });
});
</script> 

(function($){$.fn.bxCarousel=function(options){var defaults={move:1,display_num:1,speed:500,margin:0,auto:false,auto_interval:5000,auto_dir:'next',auto_hover:false,next_text:'',next_image:'',prev_text:'',prev_image:'',controls:true};var options=$.extend(defaults,options);return this.each(function(){var $this=$(this);var li=$this.find('li');var first=0;var fe=0;var last=options.display_num-1;var le=options.display_num-1;var is_working=false;var j='';var clicked=false;li.css({'float':'left','listStyle':'none','marginRight':options.margin});var ow=li.outerWidth(true);wrap_width=(ow*options.display_num)-options.margin;var seg=ow*options.move;$this.wrap('<div class="bx_container"></div>').width(999999);if(options.controls){if(options.next_image!=''||options.prev_image!=''){var controls='<a href="" class="prev"><img src="'+options.prev_image+'"/></a><a href="" class="next"><img src="'+options.next_image+'"/></a>';}
else{var controls='<a href="" class="prev">'+options.prev_text+'</a><a href="" class="next">'+options.next_text+'</a>';}}
$this.parent('.bx_container').wrap('<div class="bx_wrap"></div>').css({'position':'relative','width':wrap_width,'overflow':'hidden'}).before(controls);var w=li.slice(0,options.display_num).clone();var last_appended=(options.display_num+options.move)-1;$this.empty().append(w);get_p();get_a();$this.css({'position':'relative','left':sad:seg)});$this.parent().siblings('.next').click(function(){slide_next();clearInterval(j);clicked=true;return false;});$this.parent().siblings('.prev').click(function(){slide_prev();clearInterval(j);clicked=true;return false;});if(options.auto){start_slide();if(options.auto_hover&&clicked!=true){$this.find('li').live('mouseenter',function(){if(!clicked){clearInterval(j);}});$this.find('li').live('mouseleave',function(){if(!clicked){start_slide();}});}}
function start_slide(){if(options.auto_dir=='next'){j=setInterval(function(){slide_next()},options.auto_interval);}else{j=setInterval(function(){slide_prev()},options.auto_interval);}}
function slide_next(){if(!is_working){is_working=true;set_pos('next');$this.animate({left:'-='+seg},options.speed,function(){$this.find('li').slice(0,options.move).remove();$this.css('left',-(seg));get_a();is_working=false;});}}
function slide_prev(){if(!is_working){is_working=true;set_pos('prev');$this.animate({left:'+='+seg},options.speed,function(){$this.find('li').slice(-options.move).remove();$this.css('left',-(seg));get_p();is_working=false;});}}
function get_a(){var str=new Array();var lix=li.clone();le=last;for(i=0;i<options.move;i++){le++
if(lix[le]!=undefined){str[i]=$(lix[le]);}else{le=0;str[i]=$(lix[le]);}}
$.each(str,function(index){$this.append(str[index][0]);});}
function get_p(){var str=new Array();var lix=li.clone();fe=first;for(i=0;i<options.move;i++){fe--
if(lix[fe]!=undefined){str[i]=$(lix[fe]);}else{fe=li.length-1;str[i]=$(lix[fe]);}}
$.each(str,function(index){$this.prepend(str[index][0]);});}
function set_pos(dir){if(dir=='next'){first+=options.move;if(first>=li.length){first=first%li.length;}
last+=options.move;if(last>=li.length){last=last%li.length;}}else if(dir=='prev'){first-=options.move;if(first<0){first=li.length+first;}
last-=options.move;if(last<0){last=li.length+last;}}}});}})(jQuery);

HTML mit PHP

<div id="example2_wrap" style="position: absolute; width: 300px; height: 320px; background-color: #fff; margin-left: -38px;"> 
            <ul id="example2" style="width: 300px; height: 350px; float: left;"> 
                <?php
                    
                    
                    // Einbindung der Dateinsaetze aus der Datenbank - braucht verbindung zur db_connect.php
                    
                        $result = mysql_query('SELECT * FROM slider ORDER BY id DESC');
                        while ($row = mysql_fetch_array($result)) {
                            
                            $slider['title'] = $row['title'];
                            $slider['img'] = $row['image'];
                            $slider['disc'] = $row['disc'];
                            $slider['link'] = $row['link'];
                            $slider['alias'] = $row['alias'];
                            
                            echo '<li style="width: 295px;">';
                                echo '<a href="'.$row['link'].'" target="_top">';
                                echo '<span style="font-weight: bold; color: #ff0000;">'.$row['title'].'</span><br /><br />';
                                echo '<img src="http://www.typo3forum.net/forum/images/'.$row['image'].'" /><br /><br />';
                                echo '</a>';
                                echo '<div style="width: 200px">'.$row['disc'].'</div><br /><br />';
                            echo '</li>';
                        }

                
                ?>
            </ul>    
</div> 

Hoffe das ist hilfreich!

T3Mootools sind im Backend aktiv aber ich finde auf der Seite nichts was damit gemacht ist...

Gruß

Andre

[DoMiNiK2]

Bist du sicher, dass im Frontend auch 100%ig Mootools (oder ein anderes JS-Framework) nicht eingebunden wird? Wenn nämlich nur jQuery eingebunden wird, muss es auch mit diesem Code alleine (welchen du eben gepostet hast) funktionieren (gesetz dem Fall, der Code ist syntaktisch korrekt).
Ansonsten - müsstest du den Code wiefolgt anpassen (hab die Änderungen fett gemacht:sad:

<script>
jQuery.noConflict();

jQuery(document).ready(function() {
jQuery('ul').bxCarousel({
display_num: 1, // number of elements to be visible
move: 1, // number of elements to the shift the slides
speed: 500, // number in milliseconds it takes to finish slide animation
margin:0, // right margin to be applied to each <li> element (in pixels, although do not include "px")
auto: false, // automatically play slides without a user click
auto_interval: 5000, // the amount of time in milliseconds between each auto animation
//auto_dir: 'next', // direction of auto slideshow (options: 'next', 'prev')
auto_hover: true, // determines if the slideshow will stop when user hovers over slideshow
//next_text: 'next', // text to be used for the 'next' control
//next_image: '', // image to be used for the 'next' control
//prev_text: 'prev', // text to be used for the 'prev' control
//prev_image: '', // image to be used for the 'prev' control
//controls: true // determines if controls will be displayed
});
});
</script>

[naggison]

Danke, das werde ich nun gleich mal testen!
Was mich aber auch interessiert ist warum der iframe nicht in firefox funktioniert... das ist ne loesung die ich eigentlich hier ganz gerne verwenden wuerde. Oder gibt es ne erweiterung fuer typo3 wo ich dann php mit einbinden kann!? Ich wuerde eigentlich ungerne das Template umbauen weils einfach nicht so bestaendig ist fuer meinen fall!

Gruß

[DoMiNiK2]

Ich persönlich halte nicht viel von (i)Frames.
Was das Einbinden von PHP betrifft: http://www.typo3forum.net/forum/typo...einbinden.html (Externes PHP-Script einbinden)

[naggison]

Zitat von DoMiNiK2

Ich persönlich halte nicht viel von (i)Frames.
Was das Einbinden von PHP betrifft: http://www.typo3forum.net/forum/typo...einbinden.html (Externes PHP-Script einbinden)

PERFEKT! Das hat mir super geholfen! Nun kann ich den ganzen Schwachsinn direkt eingeben und mir die scripts per include einbinden! Das war exakt das was mir gefehlt hat :D Haette ich mal eher gefragt :P

Besten Dank an dich und alle die es gelesen haben aber sich nicht getraut haben was zu schreiben :P

Gruß

naggison