Antworten auf deine Fragen:
Neues Thema erstellen

jflow jquery slider einbauen

S

susiH

Aktives Mitglied

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: 
<script language='javascript' type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>

<!-- SLIDER -->
    <script src="<?php bloginfo('template_directory'); ?>/jquery-1.2.6.pack.js" type="text/javascript"></script>
    <script src="<?php bloginfo('template_directory'); ?>/jquery.flow.1.1.min.js" type="text/javascript"></script>
    
     <!--[if lt IE 7]>
            <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>unitpngfix.js"></script>
    <![endif]-->   

    
    <script type="text/javascript">
    $(function() {
        $("div#controller").jFlow({
            slides: "#slides",
            width: "915px",
            height: "648px"
        });
    });
    </script>
und hier soll der slider auftauchen
PHP: 
<div id="controller">
    <div id="slides">

<!-- artikel der kategorie auf seite y anzeigen -->    
<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('catID=23&posts_per_page=10'.'&paged='.$paged);
?>

<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

<div class="postimage">  <!-- artikelbild --> 
<img src="<?php echo get_post_meta($post->ID, 'postimage', true); ?>" width="545" /> 
</div>         
<!-- ENDE ARTIKELBILD -->              
            
 
<!-- BESCHREIBUNG -->  
<div id="beschreibung">      
           <?php 
           $beschreibung = get_post_meta($post->ID, "beschreibung", false);
           if ($beschreibung[0]=="") { ?> 
           <!-- If there are no custom fields, show nothing -->
           <?php } else { ?>
           <div class="beschreibung">
                <?php foreach($beschreibung as $beschreibung) {
                echo '<p>'.$beschreibung.'</p>';
                } ?>
           </div>
           <?php } ?> 
</div>           
           
<!-- ENDE BESCHREIBUNG -->              
               
<!-- MEDIEN -->   
<div id="medien">     
           <?php 
           $medien = get_post_meta($post->ID, "medien", false);
           if ($medien[0]=="") { ?> 
           <!-- If there are no custom fields, show nothing -->
           <?php } else { ?>
           <div class="medien">
                   <h3>medien</h3>
                <?php foreach($medien as $medien) {
                echo '<p>'.$medien.'</p>';
                } ?>
           </div>
           <?php } ?> 
</div>
           
<!-- ENDE MEDIEN -->  

<!-- TECHNIKEN -->  

<div id="techniken">      
           <?php 
           $techniken = get_post_meta($post->ID, "techniken", false);
           if ($techniken[0]=="") { ?> 
           <!-- If there are no custom fields, show nothing -->
           <?php } else { ?>
           <div class="techniken">
                   <h3>techniken</h3>
                <?php foreach($techniken as $techniken) {
                echo '<p>'.$techniken.'</p>';
                } ?>
           </div>
           <?php } ?> 
</div>           
           
<!-- ENDE TECHNIKEN -->      

<!-- KUNDENREFERENZEN -->  
<div id="kunden">      
           <?php 
           $kunden = get_post_meta($post->ID, "kunden", false);
           if ($kunden[0]=="") { ?> 
           <!-- If there are no custom fields, show nothing -->
           <?php } else { ?>
           <div class="kunden">
                   <h3>alle kundenreferenzen</h3>
                <?php foreach($kunden as $kunden) {
                echo '<p>'.$kunden.'</p>';
                } ?>
           </div>
           <?php } ?> 
</div>           
           
<!-- ENDE KUNDENREFERENZEN -->  
                </div>
        </div>
 </div>
<?php endwhile; ?>
</div>

    <div id="lpfeil"><img src="<?php bloginfo('template_directory'); ?>/images/lpfeil.png" class="jFlowPrev" /></div>
    <div id="rpfeil"><img src="<?php bloginfo('template_directory'); ?>/images/rpfeil.png" class="jFlowNext"/></div>
    
    
<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>
    
    
<?php $wp_query = null; $wp_query = $temp;?>
</div>
und hier die dazugehörigen css teile
HTML: 
#referenzen
    {
    font-size:10px;    
    z-index:10;    
    width:984px;
    position:absolute;
    top:190px;
    left:-6px;
    text-align:center;
    float:left;
    }

#controller
    {
    display:inline;
    overflow:hidden;
    text-align:center;
    height:648;
    }    
    
#slides    
    {
    display:inline;
    float:left;    
    text-align:center;    
    height:648px;    
    }
    
.slides    
    {
    display:inline;
    float:left;    
    text-align:center;    
    height:648px;    
    }

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...
 
S

susiH

Aktives Mitglied

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
 
F

fexx

Aktives Mitglied

AW: jflow jquery slider einbauen

du lädst zwei verschiedene jquery versionen:

Code: 
<script type="text/javascript" src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/jquery-1.2.6.pack.js"></script>
<script src="http://www.cottbus-werbung.de/wordpress/wp-includes/js/jquery/jquery.js?ver=1.4.2" type="text/javascript"></script>
 
Z

zutrinken

I hate Sundays

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....
 
S

susiH

Aktives Mitglied

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: 
<div id="content-slider">
    <div id="slides">

<!-- artikel der kategorie auf seite y anzeigen -->    
<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('catID=23&posts_per_page=10'.'&paged='.$paged);
?>


<div id="container">
    <div id="content">
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

        <div id="slider">
            <ul>
                <li>

<div class="postimage">  <!-- artikelbild --> 
<img src="<?php echo get_post_meta($post->ID, 'postimage', true); ?>" width="545" /> 
</div>         
<!-- ENDE ARTIKELBILD -->              
            
           
 
<!-- BESCHREIBUNG -->  
<div id="beschreibung">      
           <?php 
           $beschreibung = get_post_meta($post->ID, "beschreibung", false);
           if ($beschreibung[0]=="") { ?> 
           <!-- If there are no custom fields, show nothing -->
           <?php } else { ?>
           <div class="beschreibung">
                <?php foreach($beschreibung as $beschreibung) {
                echo '<p>'.$beschreibung.'</p>';
                } ?>
           </div>
           <?php } ?> 
</div>           
           
<!-- ENDE BESCHREIBUNG -->              
               
<!-- MEDIEN -->   
<div id="medien">     
           <?php 
           $medien = get_post_meta($post->ID, "medien", false);
           if ($medien[0]=="") { ?> 
           <!-- If there are no custom fields, show nothing -->
           <?php } else { ?>
           <div class="medien">
                   <h3>medien</h3>
                <?php foreach($medien as $medien) {
                echo '<p>'.$medien.'</p>';
                } ?>
           </div>
           <?php } ?> 
</div>
           
<!-- ENDE MEDIEN -->  

<!-- TECHNIKEN -->  

<div id="techniken">      
           <?php 
           $techniken = get_post_meta($post->ID, "techniken", false);
           if ($techniken[0]=="") { ?> 
           <!-- If there are no custom fields, show nothing -->
           <?php } else { ?>
           <div class="techniken">
                   <h3>techniken</h3>
                <?php foreach($techniken as $techniken) {
                echo '<p>'.$techniken.'</p>';
                } ?>
           </div>
           <?php } ?> 
</div>           
           
<!-- ENDE TECHNIKEN -->      

<!-- KUNDENREFERENZEN -->  
<div id="kunden">      
           <?php 
           $kunden = get_post_meta($post->ID, "kunden", false);
           if ($kunden[0]=="") { ?> 
           <!-- If there are no custom fields, show nothing -->
           <?php } else { ?>
           <div class="kunden">
                   <h3>alle kundenreferenzen</h3>
                <?php foreach($kunden as $kunden) {
                echo '<p>'.$kunden.'</p>';
                } ?>
           </div>
           <?php } ?> 
</div>           
           
<!-- ENDE KUNDENREFERENZEN -->  
                </li>
                </ul>
                </div>
        </div>
 </div>
<?php endwhile; ?>
</div>

    <div id="lpfeil"><img src="<?php bloginfo('template_directory'); ?>/images/lpfeil.png" class="jFlowPrev" /></div>
    <div id="rpfeil"><img src="<?php bloginfo('template_directory'); ?>/images/rpfeil.png" class="jFlowNext"/></div>
    
    
<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>
    
    
<?php $wp_query = null; $wp_query = $temp;?>
</div>
 
F

fexx

Aktives Mitglied

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: 
<div id="content-slider">
    <div id="slides">

<!-- artikel der kategorie auf seite y anzeigen -->    
<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('catID=23&posts_per_page=10'.'&paged='.$paged);
?>


 <ul>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

        
           
                <li>

<div class="postimage">  <!-- artikelbild --> 
<img src="<?php echo get_post_meta($post->ID, 'postimage', true); ?>" width="545" /> 
</div>         
<!-- ENDE ARTIKELBILD -->              
            
           
 
<!-- BESCHREIBUNG -->  
<div id="beschreibung">      
           <?php 
           $beschreibung = get_post_meta($post->ID, "beschreibung", false);
           if ($beschreibung[0]=="") { ?> 
           <!-- If there are no custom fields, show nothing -->
           <?php } else { ?>
           <div class="beschreibung">
                <?php foreach($beschreibung as $beschreibung) {
                echo '<p>'.$beschreibung.'</p>';
                } ?>
           </div>
           <?php } ?> 
</div>           
           
<!-- ENDE BESCHREIBUNG -->              
               
<!-- MEDIEN -->   
<div id="medien">     
           <?php 
           $medien = get_post_meta($post->ID, "medien", false);
           if ($medien[0]=="") { ?> 
           <!-- If there are no custom fields, show nothing -->
           <?php } else { ?>
           <div class="medien">
                   <h3>medien</h3>
                <?php foreach($medien as $medien) {
                echo '<p>'.$medien.'</p>';
                } ?>
           </div>
           <?php } ?> 
</div>
           
<!-- ENDE MEDIEN -->  

<!-- TECHNIKEN -->  

<div id="techniken">      
           <?php 
           $techniken = get_post_meta($post->ID, "techniken", false);
           if ($techniken[0]=="") { ?> 
           <!-- If there are no custom fields, show nothing -->
           <?php } else { ?>
           <div class="techniken">
                   <h3>techniken</h3>
                <?php foreach($techniken as $techniken) {
                echo '<p>'.$techniken.'</p>';
                } ?>
           </div>
           <?php } ?> 
</div>           
           
<!-- ENDE TECHNIKEN -->      

<!-- KUNDENREFERENZEN -->  
<div id="kunden">      
           <?php 
           $kunden = get_post_meta($post->ID, "kunden", false);
           if ($kunden[0]=="") { ?> 
           <!-- If there are no custom fields, show nothing -->
           <?php } else { ?>
           <div class="kunden">
                   <h3>alle kundenreferenzen</h3>
                <?php foreach($kunden as $kunden) {
                echo '<p>'.$kunden.'</p>';
                } ?>
           </div>
           <?php } ?> 
</div>           
           
<!-- ENDE KUNDENREFERENZEN -->  
     </li>           
            
<?php endwhile; ?>

                </ul>
</div>

    <div id="lpfeil"><img src="<?php bloginfo('template_directory'); ?>/images/lpfeil.png" class="jFlowPrev" /></div>
    <div id="rpfeil"><img src="<?php bloginfo('template_directory'); ?>/images/rpfeil.png" class="jFlowNext"/></div>
    
    
<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>
    
    
<?php $wp_query = null; $wp_query = $temp;?>
</div>
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 265 (Mitglieder: 4, Gäste: 261)
Robots: 1.084

Statistik des Forums

Themen
118.564
Beiträge
1.538.064
Mitglieder
67.487
Neuestes Mitglied
MichaelSEivy
Oben