Jquery slidebox

dula89 · 18.01.2012, 13:37

Hallo ich habe folgendes Problem mit jQuery.

MOmentan habe ich folgendes Script:

PHP-Code:

  <script type="text/javascript">

        jQuery(document).ready(function(){

                  window.setTimeout('nextpic()', 10000);

                });

                function nextpic(){   

                  if (jQuery("#currentpic").next().attr("src") == undefined){

                    jQuery("#currentpic").attr("style", "display:none;");

                    jQuery("#currentpic").attr("id", "");

                    jQuery("#imageblock img:first").attr("id","currentpic");

                    jQuery("#currentpic").attr("style", "");

                  }

                  else{

                    jQuery("#currentpic").next().attr("id", "next");

                    jQuery("#currentpic").attr("style", "display:none;");

                    jQuery("#currentpic").attr("id", "");        

                    jQuery("#next").attr("id", "currentpic");

                    jQuery("#currentpic").attr("style", "");

                  }

                  window.setTimeout('nextpic()', 10000);

                }

     </script>

Html Teil

PHP-Code:

  <div id="imageblock">

                   <img src="wp-content/themes/igniti_2/images/image1.png" title="pic1" style="" id="1_currentpic"/>

                   <img src="wp-content/themes/igniti_2/images/image2.png" title="pic2" style="" id="2_currentpic"/>

                   <img src="wp-content/themes/igniti_2/images/image3.png" title="pic3" style="display:none;" id="3_currentpic"/>

                </div>

                

                <div id="stepImage">

                    <ul>

                        <li id="menu_li_1">1</li>

                        <li id="menu_li_2">2</li>

                        <li id="menu_li_3">3</li>

                    </ul>

                </div>

Dieses wechselt automatische meine Bilder.

Nun hätte ich gerne noch eine Anzeige von Steps auf welchem Bild ich aktuell bin und wenn ich dieses anklicken würde, kommt man auf das entsprechende Bild.

Ich weiß grad nicht so richtig wie ich das ganze umsetzten soll, könnt ihr mir vllt weiter helfen.

lg

Connar · 18.01.2012, 14:22

Das ist keine PHP-Frage ..

Du greifst auf #currentpic zu, hast aber in deinem HTML-Code überhaupt kein Element mit dieser ID. Dein Code würde deinen Bildern dann später auch die ID currentpic zuweisen, damit überschreibst du aber x_currentpic (x := {1, 2, 3}), was dem, was du nun vor hast, absolut entgegen wirkt. Dann könntest du x_currentpic als Starteinstellung für die IDs der Bilder auch komplett weglassen ...

MFG Connar

18.01.2012, 21:11

ich würd sagen, dass der thread mal verschoben werden müsste

nikosch · 18.01.2012, 21:12

Irgendwie moderiere ich hier schon wieder alleine

[MOD: verschoben]

dula89 · 20.01.2012, 09:09

Hey, ich bin es nochmal ich habe mein Code mitlerweile etwas umgestellt..

habe nun meine Slidebox eig. funktionsmässig fertig...allerdings bin ich mit der animation nicht zufrieden.

Ich hätte es am liebens, wenn immer einzelne Balken hoch und runter laufen und immer ein Teil mehr vom Bild zu sehen ist. Allerdings weiß ich nicht wie ich das umsetzen soll..ich habe mir mal ein paar fertig Slider angeschaut allerdings ist, das sehr viel Code...

Hier mein Code..

PHP-Code:

  jQuery(document).ready(function(){
                  slideShow();
                   jQuery("#stepImage ul").children().each(function(){
                        jQuery(this).mouseover(function(){
                            slideShow(jQuery(this).attr("rel"));
                            clearTimeout(timer);
                        });
                        jQuery(this).mouseout(function(){
                            imageCounter = parseInt(jQuery(this).attr("rel"));
                            slideShow();
                        });
                        
                    });
                });
                var imageCounter = 1;
                function hideAll(){ 
                    
                    jQuery("#imageblock").children().each(function(){
                        jQuery(this).hide();
                    });
                    jQuery("#stepImage ul").children().each(function(){
                        jQuery(this).removeClass("sliderlistactiv");
                        
                    });
                    jQuery(".sliderText").each(function(){
                        jQuery(this).hide().animate({opacity: 0.00});
                        
                    });
                }
                function slideShow(use_id){ 
//                    console.log("id= "+id+'imageCounter= '+imageCounter);
                    hideAll();
                    // Wenn der Imagecounter größer ist als die Anzahl der children(kinder elemente)
                    // wird der imageCounter wird der imageCounter auf 1 gesetzt
                    // die Klasse wird hinzugefügt und vom letzten children Elemant entfernt

                    parseInt(use_id);
                    if(use_id) {
                        imageCounter = use_id; 
                    }
                    
                    
                    if(imageCounter > 3) {
                        imageCounter = 1;
                        jQuery("#"+imageCounter+"_currentpic").show();
                        jQuery("#menu_li_"+imageCounter).addClass("sliderlistactiv");
                        jQuery("#text_"+imageCounter).show().animate({opacity: 1.00}, 4000);
                        imageCounter = imageCounter + 1;
                    } else {
                        // zeigt das momentane Image anhand der größe des imagecounters
                        // für eine Classe dem aktuellem Image hinzu und entfernt das vorherige
                        // imageCounter wird um +1 erhöht nach jedem durchlauf
                        jQuery("#"+imageCounter+"_currentpic").show().animate({"opacity": '1.00', right: 0}, 4000);
                        
                        jQuery("#text_"+imageCounter).show().animate({opacity: 1.00}, 4000);
//                        animate({opacity: 1.00}, 4000)
                        jQuery("#menu_li_"+imageCounter).addClass("sliderlistactiv");
                        imageCounter = imageCounter + 1;
                    }
                    if(!use_id) {
                        timer = setTimeout('slideShow()', 8000);
                    }
                }

Im Moment wird die Schrift von unsichtbar auf Sichtbar gestellt und mein Bild kommt von Rechts rein "gefahren"...sehr simpel

rudygotya · 20.01.2012, 09:43

Zitat:

Ich hätte es am liebens, wenn immer einzelne Balken hoch und runter laufen und immer ein Teil mehr vom Bild zu sehen ist.

Versteh leider nicht, was du mit Balken meinst. Welche Bilderteile? Hast du eventuell irgendein Beispiel, das so ähnlich ist wie das, was du erreichen möchtest? Oder gerne auch eine genauere Erklärung.

Zu deinem Code:

PHP-Code:

  jQuery("#imageblock").children().each(function(){
  jQuery(this).hide();
});

=>

PHP-Code:

  $("#imageblock").children().hide();

PHP-Code:

  jQuery(".sliderText").each(function(){
  jQuery(this).hide().animate({opacity: 0.00});
});

=>

PHP-Code:

  $(".sliderText").fadeOut(); // alternativ such dir nen effekt von jqueryui aus

PHP-Code:

  parseInt(use_id);

=>

PHP-Code:

  parseInt(use_id, 10);

radix-Parameter unbedingt angeben.

Generell solltest du "per Konvention statisch"e DOMKnoten cachen. Praktisch in deiner Seitenstruktur Knoten, die du nicht durch Ajax austauschst oder sonstwie ersetzt. Für sowas bietet sich eine Helper-Fn a la dieser hier an:

PHP-Code:

  (function () {
var cache = {};

window.$c = function ( selector ) {
    if( cache[ selector ] == null ) {
        cache[ selector ] = $(selector || "");
    }
    return cache[ selector ];
});

})();

=> statt jQuery $c schreiben und du bekommst jedes mal das gleiche jQuery-Objekt zurück. Macht Sinn für all deine unveränderlichen Container.

Du solltest auch nicht über einzelne jQuery-Objekte iterieren, das wird intern eh erledigt. Nur intern wird nicht jedes mal ein neues jQuery-Object erzeugt, lass das also besser jQuery entscheiden.

Viele Grüße

Basti

dula89 · 23.01.2012, 14:14

Am besten wäre es wenn die Bilder so wechseln würden:
http://workshop.rs/projects/coin-slider/

rudygotya · 23.01.2012, 14:18

Dann benutz doch einfach das fertige plugin

nikosch · 23.01.2012, 20:05

Korrekt. Wenn Du das unbedingt nachbauen willst, dann mach das doch bitte alleine. Den wenigsten hier dürfte sich erschließen, warum das jetzt nötig ist.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
jQueryLog new extension for debugging jquery (feedback request)	jquerylog	JavaScript, Ajax und mehr	8	26.12.2011 11:58
JQuery Ajax PHP Aktualisierung	thiagojonas	PHP Einsteiger	3	25.10.2011 23:22
jQuery UI Tabs komplett mit AJAX laden und letzt gewählten Tab wählen	K00S	JavaScript, Ajax und mehr	6	10.09.2011 13:54
[Erledigt] [JQuery] JQuery funktioniert nach .insertBefore() nicht mehr	Minimi	JavaScript, Ajax und mehr	5	06.09.2011 21:24
[Erledigt] Jquery mobile form action verhalten unterdrücken	drsoong	JavaScript, Ajax und mehr	1	21.07.2011 14:57
jQuery: Select Area in Input Feld umwandeln	Elementus	JavaScript, Ajax und mehr	1	12.07.2011 20:31
Einsatz von Milestones (jQuery)	dreamcatcher	JavaScript, Ajax und mehr	4	28.06.2011 12:07
PHP und jquery	mehlwurm	PHP Einsteiger	13	30.05.2011 23:09
Einfaches JQuery resize und scoll läuft nicht	smilla	JavaScript, Ajax und mehr	5	08.02.2011 20:44
Bin noch ein Anfänger mit jquery bitte um hilfe	bomber007	JavaScript, Ajax und mehr	4	19.08.2010 23:34
[Erledigt] Statistik mit jQuery	DJ_RhoxxZ	JavaScript, Ajax und mehr	6	25.07.2010 17:47
jquery: dialogbox funktioniert nicht	Dreamwatcher	JavaScript, Ajax und mehr	16	22.07.2010 18:22
jQuery Plug scroll to - wie einbetten?	mxxxx	JavaScript, Ajax und mehr	5	24.04.2010 18:12
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
For Schleife mit jQuery	phpbeginner	JavaScript, Ajax und mehr	3	22.11.2008 22:35

18.01.2012, 13:37
dula89 Benutzer Registriert seit: 13.12.2011 Beiträge: 47 PHP-Kenntnisse: Anfänger	Jquery slidebox Hallo ich habe folgendes Problem mit jQuery. MOmentan habe ich folgendes Script: PHP-Code: <script type="text/javascript"> jQuery(document).ready(function(){ window.setTimeout('nextpic()', 10000); }); function nextpic(){ if (jQuery("#currentpic").next().attr("src") == undefined){ jQuery("#currentpic").attr("style", "display:none;"); jQuery("#currentpic").attr("id", ""); jQuery("#imageblock img:first").attr("id","currentpic"); jQuery("#currentpic").attr("style", ""); } else{ jQuery("#currentpic").next().attr("id", "next"); jQuery("#currentpic").attr("style", "display:none;"); jQuery("#currentpic").attr("id", ""); jQuery("#next").attr("id", "currentpic"); jQuery("#currentpic").attr("style", ""); } window.setTimeout('nextpic()', 10000); } </script> Html Teil PHP-Code: <div id="imageblock"> <img src="wp-content/themes/igniti_2/images/image1.png" title="pic1" style="" id="1_currentpic"/> <img src="wp-content/themes/igniti_2/images/image2.png" title="pic2" style="" id="2_currentpic"/> <img src="wp-content/themes/igniti_2/images/image3.png" title="pic3" style="display:none;" id="3_currentpic"/> </div> <div id="stepImage"> <ul> <li id="menu_li_1">1</li> <li id="menu_li_2">2</li> <li id="menu_li_3">3</li> </ul> </div> Dieses wechselt automatische meine Bilder. Nun hätte ich gerne noch eine Anzeige von Steps auf welchem Bild ich aktuell bin und wenn ich dieses anklicken würde, kommt man auf das entsprechende Bild. Ich weiß grad nicht so richtig wie ich das ganze umsetzten soll, könnt ihr mir vllt weiter helfen. lg


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

18.01.2012, 14:22
Connar Erfahrener Benutzer Registriert seit: 22.01.2005 Beiträge: 606	Das ist keine PHP-Frage .. Du greifst auf #currentpic zu, hast aber in deinem HTML-Code überhaupt kein Element mit dieser ID. Dein Code würde deinen Bildern dann später auch die ID currentpic zuweisen, damit überschreibst du aber x_currentpic (x := {1, 2, 3}), was dem, was du nun vor hast, absolut entgegen wirkt. Dann könntest du x_currentpic als Starteinstellung für die IDs der Bilder auch komplett weglassen ... MFG Connar

18.01.2012, 21:11
WilkeDevelop Gast Beiträge: n/a	ich würd sagen, dass der thread mal verschoben werden müsste

18.01.2012, 21:12
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Irgendwie moderiere ich hier schon wieder alleine [MOD: verschoben] __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

20.01.2012, 09:09
dula89 Benutzer Registriert seit: 13.12.2011 Beiträge: 47 PHP-Kenntnisse: Anfänger	Hey, ich bin es nochmal ich habe mein Code mitlerweile etwas umgestellt.. habe nun meine Slidebox eig. funktionsmässig fertig...allerdings bin ich mit der animation nicht zufrieden. Ich hätte es am liebens, wenn immer einzelne Balken hoch und runter laufen und immer ein Teil mehr vom Bild zu sehen ist. Allerdings weiß ich nicht wie ich das umsetzen soll..ich habe mir mal ein paar fertig Slider angeschaut allerdings ist, das sehr viel Code... Hier mein Code.. PHP-Code: jQuery(document).ready(function(){ slideShow(); jQuery("#stepImage ul").children().each(function(){ jQuery(this).mouseover(function(){ slideShow(jQuery(this).attr("rel")); clearTimeout(timer); }); jQuery(this).mouseout(function(){ imageCounter = parseInt(jQuery(this).attr("rel")); slideShow(); }); }); }); var imageCounter = 1; function hideAll(){ jQuery("#imageblock").children().each(function(){ jQuery(this).hide(); }); jQuery("#stepImage ul").children().each(function(){ jQuery(this).removeClass("sliderlistactiv"); }); jQuery(".sliderText").each(function(){ jQuery(this).hide().animate({opacity: 0.00}); }); } function slideShow(use_id){ // console.log("id= "+id+'imageCounter= '+imageCounter); hideAll(); // Wenn der Imagecounter größer ist als die Anzahl der children(kinder elemente) // wird der imageCounter wird der imageCounter auf 1 gesetzt // die Klasse wird hinzugefügt und vom letzten children Elemant entfernt parseInt(use_id); if(use_id) { imageCounter = use_id; } if(imageCounter > 3) { imageCounter = 1; jQuery("#"+imageCounter+"_currentpic").show(); jQuery("#menu_li_"+imageCounter).addClass("sliderlistactiv"); jQuery("#text_"+imageCounter).show().animate({opacity: 1.00}, 4000); imageCounter = imageCounter + 1; } else { // zeigt das momentane Image anhand der größe des imagecounters // für eine Classe dem aktuellem Image hinzu und entfernt das vorherige // imageCounter wird um +1 erhöht nach jedem durchlauf jQuery("#"+imageCounter+"_currentpic").show().animate({"opacity": '1.00', right: 0}, 4000); jQuery("#text_"+imageCounter).show().animate({opacity: 1.00}, 4000); // animate({opacity: 1.00}, 4000) jQuery("#menu_li_"+imageCounter).addClass("sliderlistactiv"); imageCounter = imageCounter + 1; } if(!use_id) { timer = setTimeout('slideShow()', 8000); } } Im Moment wird die Schrift von unsichtbar auf Sichtbar gestellt und mein Bild kommt von Rechts rein "gefahren"...sehr simpel

23.01.2012, 14:14
dula89 Benutzer Registriert seit: 13.12.2011 Beiträge: 47 PHP-Kenntnisse: Anfänger	Am besten wäre es wenn die Bilder so wechseln würden: http://workshop.rs/projects/coin-slider/

23.01.2012, 14:18
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Dann benutz doch einfach das fertige plugin __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

23.01.2012, 20:05
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Korrekt. Wenn Du das unbedingt nachbauen willst, dann mach das doch bitte alleine. Den wenigsten hier dürfte sich erschließen, warum das jetzt nötig ist. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --