Anzeige

jflow jquery slider einbauen

jflow jquery slider einbauen | PSD-Tutorials.de

Erstellt von susiH, 21.02.2011.

  1. susiH

    susiH Aktives Mitglied

    Dabei seit:
    04.12.2008
    Beiträge:
    267
    Geschlecht:
    weiblich
    jflow jquery slider einbauen
    hi leute,
    ich versuche gerade die wordpressartikel in einem jqueryslider auszugeben.
    allerdings stelle ich mich dazu anscheinend zu dusselig an :':)':)':)':)':)'(

    so habe ich das in der header.php eingebunden
    PHP:
    1.  
    2. <script language='javascript' type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>
    3.  
    4. <!-- SLIDER -->
    5.     <script src="<?php bloginfo('template_directory'); ?>/jquery-1.2.6.pack.js" type="text/javascript"></script>
    6.     <script src="<?php bloginfo('template_directory'); ?>/jquery.flow.1.1.min.js" type="text/javascript"></script>
    7.    
    8.      <!--[if lt IE 7]>
    9.             <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>unitpngfix.js"></script>
    10.     <![endif]-->  
    11.  
    12.    
    13.     <script type="text/javascript">
    14.     $(function() {
    15.         $("div#controller").jFlow({
    16.             slides: "#slides",
    17.             width: "915px",
    18.             height: "648px"
    19.         });
    20.     });
    21.     </script>
    22.  
    23.  
    und hier soll der slider auftauchen
    PHP:
    1.  
    2. <div id="controller">
    3.     <div id="slides">
    4.  
    5. <!-- artikel der kategorie auf seite y anzeigen -->    
    6. <?php
    7. $temp = $wp_query;
    8. $wp_query= null;
    9. $wp_query = new WP_Query();
    10. $wp_query->query('catID=23&posts_per_page=10'.'&paged='.$paged);
    11. ?>
    12.  
    13. <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
    14.  
    15. <div class="postimage">  <!-- artikelbild -->
    16. <img src="<?php echo get_post_meta($post->ID, 'postimage', true); ?>" width="545" />
    17. </div>        
    18. <!-- ENDE ARTIKELBILD -->              
    19.            
    20.  
    21. <!-- BESCHREIBUNG -->  
    22. <div id="beschreibung">      
    23.            <?php
    24.            $beschreibung = get_post_meta($post->ID, "beschreibung", false);
    25.            if ($beschreibung[0]=="") { ?>
    26.            <!-- If there are no custom fields, show nothing -->
    27.            <?php } else { ?>
    28.            <div class="beschreibung">
    29.                 <?php foreach($beschreibung as $beschreibung) {
    30.                 echo '<p>'.$beschreibung.'</p>';
    31.                 } ?>
    32.            </div>
    33.            <?php } ?>
    34. </div>          
    35.            
    36. <!-- ENDE BESCHREIBUNG -->              
    37.                
    38. <!-- MEDIEN -->  
    39. <div id="medien">    
    40.            <?php
    41.            $medien = get_post_meta($post->ID, "medien", false);
    42.            if ($medien[0]=="") { ?>
    43.            <!-- If there are no custom fields, show nothing -->
    44.            <?php } else { ?>
    45.            <div class="medien">
    46.                    <h3>medien</h3>
    47.                 <?php foreach($medien as $medien) {
    48.                 echo '<p>'.$medien.'</p>';
    49.                 } ?>
    50.            </div>
    51.            <?php } ?>
    52. </div>
    53.            
    54. <!-- ENDE MEDIEN -->  
    55.  
    56. <!-- TECHNIKEN -->  
    57.  
    58. <div id="techniken">      
    59.            <?php
    60.            $techniken = get_post_meta($post->ID, "techniken", false);
    61.            if ($techniken[0]=="") { ?>
    62.            <!-- If there are no custom fields, show nothing -->
    63.            <?php } else { ?>
    64.            <div class="techniken">
    65.                    <h3>techniken</h3>
    66.                 <?php foreach($techniken as $techniken) {
    67.                 echo '<p>'.$techniken.'</p>';
    68.                 } ?>
    69.            </div>
    70.            <?php } ?>
    71. </div>          
    72.            
    73. <!-- ENDE TECHNIKEN -->      
    74.  
    75. <!-- KUNDENREFERENZEN -->  
    76. <div id="kunden">      
    77.            <?php
    78.            $kunden = get_post_meta($post->ID, "kunden", false);
    79.            if ($kunden[0]=="") { ?>
    80.            <!-- If there are no custom fields, show nothing -->
    81.            <?php } else { ?>
    82.            <div class="kunden">
    83.                    <h3>alle kundenreferenzen</h3>
    84.                 <?php foreach($kunden as $kunden) {
    85.                 echo '<p>'.$kunden.'</p>';
    86.                 } ?>
    87.            </div>
    88.            <?php } ?>
    89. </div>          
    90.            
    91. <!-- ENDE KUNDENREFERENZEN -->  
    92.                 </div>
    93.         </div>
    94.  </div>
    95. <?php endwhile; ?>
    96. </div>
    97.  
    98.     <div id="lpfeil"><img src="<?php bloginfo('template_directory'); ?>/images/lpfeil.png" class="jFlowPrev" /></div>
    99.     <div id="rpfeil"><img src="<?php bloginfo('template_directory'); ?>/images/rpfeil.png" class="jFlowNext"/></div>
    100.    
    101.    
    102. <div id="facebook"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.cottbus-werbung.de" layout="button_count" show_faces="false" width="450" font="trebuchet ms"></fb:like></div>
    103.    
    104.    
    105. <?php $wp_query = null; $wp_query = $temp;?>
    106. </div>                
    107.  
    108.  
    und hier die dazugehörigen css teile
    HTML:
    1.  
    2. #referenzen
    3.     {
    4.     font-size:10px;    
    5.     z-index:10;    
    6.     width:984px;
    7.     position:absolute;
    8.     top:190px;
    9.     left:-6px;
    10.     text-align:center;
    11.     float:left;
    12.     }
    13.  
    14. #controller
    15.     {
    16.     display:inline;
    17.     overflow:hidden;
    18.     text-align:center;
    19.     height:648;
    20.     }    
    21.    
    22. #slides    
    23.     {
    24.     display:inline;
    25.     float:left;    
    26.     text-align:center;    
    27.     height:648px;    
    28.     }
    29.    
    30. .slides    
    31.     {
    32.     display:inline;
    33.     float:left;    
    34.     text-align:center;    
    35.     height:648px;    
    36.     }
    37.  
    38.  
    ich habe schon versucht, dass alle artikel nebeneinander erscheinen, damit dieses prinzip des sliders funktioniert, aber leider werden die artiekl immer versetzt angezeigt

    danke schonmal an euch...
     
    #1      
  2. fexx

    fexx Aktives Mitglied

    Dabei seit:
    13.07.2010
    Beiträge:
    1.058
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe Creative Cloud, Coda2
    jflow jquery slider einbauen
    AW: jflow jquery slider einbauen

    hättest du mal einen link? kanns mir grade noch nicht so ganz vorstellen :p
     
    #2      
  3. susiH

    susiH Aktives Mitglied

    Dabei seit:
    04.12.2008
    Beiträge:
    267
    Geschlecht:
    weiblich
    jflow jquery slider einbauen
    AW: jflow jquery slider einbauen

    naja, das sieht jetz alles etwas durcheinander aus, weil die artikel nicht nebeneinander, sondern irgendwie überlappend dargestellt werden

    aber auf die seite soll es drauf
    werk zwei
     
    #3      
  4. fexx

    fexx Aktives Mitglied

    Dabei seit:
    13.07.2010
    Beiträge:
    1.058
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe Creative Cloud, Coda2
    jflow jquery slider einbauen
    AW: jflow jquery slider einbauen

    du lädst zwei verschiedene jquery versionen:

    Code (Text):
    1.  
    2. <script type="text/javascript" src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/jquery-1.2.6.pack.js"></script>
    3. <script src="http://www.cottbus-werbung.de/wordpress/wp-includes/js/jquery/jquery.js?ver=1.4.2" type="text/javascript"></script>
    4.  
     
    #4      
  5. susiH

    susiH Aktives Mitglied

    Dabei seit:
    04.12.2008
    Beiträge:
    267
    Geschlecht:
    weiblich
    jflow jquery slider einbauen
    AW: jflow jquery slider einbauen

    ich habe das obere gelöscht, aber es hat sich nichts verändert
     
    #5      
  6. fexx

    fexx Aktives Mitglied

    Dabei seit:
    13.07.2010
    Beiträge:
    1.058
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe Creative Cloud, Coda2
    jflow jquery slider einbauen
    AW: jflow jquery slider einbauen

    aber noch nicht in dem stand, der online ist ;-)
     
    #6      
  7. susiH

    susiH Aktives Mitglied

    Dabei seit:
    04.12.2008
    Beiträge:
    267
    Geschlecht:
    weiblich
    jflow jquery slider einbauen
    AW: jflow jquery slider einbauen

    upps, hab ich gemacht. aber es hat sich trotzdem nicht verändert
     
    #7      
  8. zutrinken

    zutrinken I hate Sundays

    Dabei seit:
    23.09.2009
    Beiträge:
    223
    Geschlecht:
    männlich
    Ort:
    Berlin
    jflow jquery slider einbauen
    AW: jflow jquery slider einbauen

    das problem ist, dass jflow nur mit jquery 1.2.6 funktioniert...

    hier ist ein fallback um die von Wordpress eingefügte jquery version zu entfernen...habe ich aber selbst nicht getestet...

    //REMOVE EMBEDDED VERSION OF JQUERY
    remove_action('wp_head','jquery');


    //ADD GOOGLE HOSTED jQUERY
    function jquery_google() {
    ?>
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    }
    add_action('wp_head','jquery_google');

    ansonsten nimm einfach nen anderes jquery slidingplugin wie easyslide, etc....
     
    #8      
  9. susiH

    susiH Aktives Mitglied

    Dabei seit:
    04.12.2008
    Beiträge:
    267
    Geschlecht:
    weiblich
    jflow jquery slider einbauen
    easyslide - jquery slider einbauen

    ich habe jetz zu easyslide gewechselt... aber ich kriegs anscheinend nicht hin, den slider in den loop einzubauen.
    kann mir jemand sagen, was ich noch in diesen code einbauen muss
    PHP:
    1.  
    2. <div id="content-slider">
    3.     <div id="slides">
    4.  
    5. <!-- artikel der kategorie auf seite y anzeigen -->    
    6. <?php
    7. $temp = $wp_query;
    8. $wp_query= null;
    9. $wp_query = new WP_Query();
    10. $wp_query->query('catID=23&posts_per_page=10'.'&paged='.$paged);
    11. ?>
    12.  
    13.  
    14. <div id="container">
    15.     <div id="content">
    16. <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
    17.  
    18.         <div id="slider">
    19.             <ul>
    20.                 <li>
    21.  
    22. <div class="postimage">  <!-- artikelbild -->
    23. <img src="<?php echo get_post_meta($post->ID, 'postimage', true); ?>" width="545" />
    24. </div>        
    25. <!-- ENDE ARTIKELBILD -->              
    26.            
    27.            
    28.  
    29. <!-- BESCHREIBUNG -->  
    30. <div id="beschreibung">      
    31.            <?php
    32.            $beschreibung = get_post_meta($post->ID, "beschreibung", false);
    33.            if ($beschreibung[0]=="") { ?>
    34.            <!-- If there are no custom fields, show nothing -->
    35.            <?php } else { ?>
    36.            <div class="beschreibung">
    37.                 <?php foreach($beschreibung as $beschreibung) {
    38.                 echo '<p>'.$beschreibung.'</p>';
    39.                 } ?>
    40.            </div>
    41.            <?php } ?>
    42. </div>          
    43.            
    44. <!-- ENDE BESCHREIBUNG -->              
    45.                
    46. <!-- MEDIEN -->  
    47. <div id="medien">    
    48.            <?php
    49.            $medien = get_post_meta($post->ID, "medien", false);
    50.            if ($medien[0]=="") { ?>
    51.            <!-- If there are no custom fields, show nothing -->
    52.            <?php } else { ?>
    53.            <div class="medien">
    54.                    <h3>medien</h3>
    55.                 <?php foreach($medien as $medien) {
    56.                 echo '<p>'.$medien.'</p>';
    57.                 } ?>
    58.            </div>
    59.            <?php } ?>
    60. </div>
    61.            
    62. <!-- ENDE MEDIEN -->  
    63.  
    64. <!-- TECHNIKEN -->  
    65.  
    66. <div id="techniken">      
    67.            <?php
    68.            $techniken = get_post_meta($post->ID, "techniken", false);
    69.            if ($techniken[0]=="") { ?>
    70.            <!-- If there are no custom fields, show nothing -->
    71.            <?php } else { ?>
    72.            <div class="techniken">
    73.                    <h3>techniken</h3>
    74.                 <?php foreach($techniken as $techniken) {
    75.                 echo '<p>'.$techniken.'</p>';
    76.                 } ?>
    77.            </div>
    78.            <?php } ?>
    79. </div>          
    80.            
    81. <!-- ENDE TECHNIKEN -->      
    82.  
    83. <!-- KUNDENREFERENZEN -->  
    84. <div id="kunden">      
    85.            <?php
    86.            $kunden = get_post_meta($post->ID, "kunden", false);
    87.            if ($kunden[0]=="") { ?>
    88.            <!-- If there are no custom fields, show nothing -->
    89.            <?php } else { ?>
    90.            <div class="kunden">
    91.                    <h3>alle kundenreferenzen</h3>
    92.                 <?php foreach($kunden as $kunden) {
    93.                 echo '<p>'.$kunden.'</p>';
    94.                 } ?>
    95.            </div>
    96.            <?php } ?>
    97. </div>          
    98.            
    99. <!-- ENDE KUNDENREFERENZEN -->  
    100.                 </li>
    101.                 </ul>
    102.                 </div>
    103.         </div>
    104.  </div>
    105. <?php endwhile; ?>
    106. </div>
    107.  
    108.     <div id="lpfeil"><img src="<?php bloginfo('template_directory'); ?>/images/lpfeil.png" class="jFlowPrev" /></div>
    109.     <div id="rpfeil"><img src="<?php bloginfo('template_directory'); ?>/images/rpfeil.png" class="jFlowNext"/></div>
    110.    
    111.    
    112. <div id="facebook"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.cottbus-werbung.de" layout="button_count" show_faces="false" width="450" font="trebuchet ms"></fb:like></div>
    113.    
    114.    
    115. <?php $wp_query = null; $wp_query = $temp;?>
    116. </div>                
    117.  
    118.  
    119.  
     
    #9      
  10. fexx

    fexx Aktives Mitglied

    Dabei seit:
    13.07.2010
    Beiträge:
    1.058
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe Creative Cloud, Coda2
    jflow jquery slider einbauen
    AW: jflow jquery slider einbauen

    du verwendest mehrfach id`s

    auserdem öffnest du die liste im loop ...

    probiers mal aus ... hoffe ich hab alles geschlossen ;-)
    Code (Text):
    1.  
    2. <div id="content-slider">
    3.     <div id="slides">
    4.  
    5. <!-- artikel der kategorie auf seite y anzeigen -->    
    6. <?php
    7. $temp = $wp_query;
    8. $wp_query= null;
    9. $wp_query = new WP_Query();
    10. $wp_query->query('catID=23&posts_per_page=10'.'&paged='.$paged);
    11. ?>
    12.  
    13.  
    14.  <ul>
    15. <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
    16.  
    17.        
    18.            
    19.                 <li>
    20.  
    21. <div class="postimage">  <!-- artikelbild -->
    22. <img src="<?php echo get_post_meta($post->ID, 'postimage', true); ?>" width="545" />
    23. </div>        
    24. <!-- ENDE ARTIKELBILD -->              
    25.            
    26.            
    27.  
    28. <!-- BESCHREIBUNG -->  
    29. <div id="beschreibung">      
    30.            <?php
    31.            $beschreibung = get_post_meta($post->ID, "beschreibung", false);
    32.            if ($beschreibung[0]=="") { ?>
    33.            <!-- If there are no custom fields, show nothing -->
    34.            <?php } else { ?>
    35.            <div class="beschreibung">
    36.                 <?php foreach($beschreibung as $beschreibung) {
    37.                 echo '<p>'.$beschreibung.'</p>';
    38.                 } ?>
    39.            </div>
    40.            <?php } ?>
    41. </div>          
    42.            
    43. <!-- ENDE BESCHREIBUNG -->              
    44.                
    45. <!-- MEDIEN -->  
    46. <div id="medien">    
    47.            <?php
    48.            $medien = get_post_meta($post->ID, "medien", false);
    49.            if ($medien[0]=="") { ?>
    50.            <!-- If there are no custom fields, show nothing -->
    51.            <?php } else { ?>
    52.            <div class="medien">
    53.                    <h3>medien</h3>
    54.                 <?php foreach($medien as $medien) {
    55.                 echo '<p>'.$medien.'</p>';
    56.                 } ?>
    57.            </div>
    58.            <?php } ?>
    59. </div>
    60.            
    61. <!-- ENDE MEDIEN -->  
    62.  
    63. <!-- TECHNIKEN -->  
    64.  
    65. <div id="techniken">      
    66.            <?php
    67.            $techniken = get_post_meta($post->ID, "techniken", false);
    68.            if ($techniken[0]=="") { ?>
    69.            <!-- If there are no custom fields, show nothing -->
    70.            <?php } else { ?>
    71.            <div class="techniken">
    72.                    <h3>techniken</h3>
    73.                 <?php foreach($techniken as $techniken) {
    74.                 echo '<p>'.$techniken.'</p>';
    75.                 } ?>
    76.            </div>
    77.            <?php } ?>
    78. </div>          
    79.            
    80. <!-- ENDE TECHNIKEN -->      
    81.  
    82. <!-- KUNDENREFERENZEN -->  
    83. <div id="kunden">      
    84.            <?php
    85.            $kunden = get_post_meta($post->ID, "kunden", false);
    86.            if ($kunden[0]=="") { ?>
    87.            <!-- If there are no custom fields, show nothing -->
    88.            <?php } else { ?>
    89.            <div class="kunden">
    90.                    <h3>alle kundenreferenzen</h3>
    91.                 <?php foreach($kunden as $kunden) {
    92.                 echo '<p>'.$kunden.'</p>';
    93.                 } ?>
    94.            </div>
    95.            <?php } ?>
    96. </div>          
    97.            
    98. <!-- ENDE KUNDENREFERENZEN -->  
    99.      </li>          
    100.            
    101. <?php endwhile; ?>
    102.  
    103.                 </ul>
    104. </div>
    105.  
    106.     <div id="lpfeil"><img src="<?php bloginfo('template_directory'); ?>/images/lpfeil.png" class="jFlowPrev" /></div>
    107.     <div id="rpfeil"><img src="<?php bloginfo('template_directory'); ?>/images/rpfeil.png" class="jFlowNext"/></div>
    108.    
    109.    
    110. <div id="facebook"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.cottbus-werbung.de" layout="button_count" show_faces="false" width="450" font="trebuchet ms"></fb:like></div>
    111.    
    112.    
    113. <?php $wp_query = null; $wp_query = $temp;?>
    114. </div>
    115.  
     
    #10      
  11. susiH

    susiH Aktives Mitglied

    Dabei seit:
    04.12.2008
    Beiträge:
    267
    Geschlecht:
    weiblich
    jflow jquery slider einbauen
    AW: jflow jquery slider einbauen

    oh man ich könnt dich knutschen... es geht. danka danke danke
     
    #11      
  12. fexx

    fexx Aktives Mitglied

    Dabei seit:
    13.07.2010
    Beiträge:
    1.058
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe Creative Cloud, Coda2
    jflow jquery slider einbauen
    #12      
Seobility SEO Tool
x
×
×