Hallo zusammen, ich würd mir gerne einen ImageSlider zammschustern der quasi die Daten von den z.b. vier zuletzt aktiven membern anzeigt.
Da ich die stelle bestimmen will wo dieser angezeigt werden soll dachte ich mir das es sinnvoll wäre ein plugin mit shortcode zu erstellen.
und das hab ich bis jetzt hinbekommen:
: hiermit initialisiere ich das plugin, erstelle den shortcode und sage ihm welche datei ausgelesen werden soll
/*
Plugin Name: BP Community ImageSlider
Plugin URI: http://www.mymukker.de/
Description: ImageSlider für Aktive member
Author: Tomas Waldmann
Version: 1.0.0
Author URI: http://www.mymukker.de/
*/
// Add Shortcode [bpcis]
function bpimageslider() {
include ("imageslider.php");
}
add_shortcode( 'bpcis', 'bpimageslider' );: hier das html/php konstrukt vom imageslider
: das ist der part mit dem ich mich nicht auskenne weil ich ein totaler anfänger in php bin.
: ich habs mal primitiv reingeschrieben wie ich es mir dachte
: zusammenfassung nochmal
: wie lese ich die daten der zuletzt aktiven member aus? in diesem falle, der letzten vier. Ich benötige das avatarbild, das zuletzt hochgeladene bild und den titel dazu. letzteres ist nicht zwingend. Zur medienverwaltung wird das rtMedia plugin genutzt.
<link rel="stylesheet" href="/wp-content/plugins/bpcomslider/bpcis.css" type="text/css" media="all" />
<script type="text/javascript" src="/wp-content/plugins/bpcomslider/bpcis.js"></script>
<?php global $authordata; ?>
<ul id="bpimageslider">
<li>
<img alt="#" src="<?php bildpfad ?>" />
<div class="bpis-user"><?php useravatar ?></div>
<div class="bpis-title"><?php titel vom bild ?></div>
</li>
<li>
<img alt="#" src="<?php bildpfad ?>" />
<div class="bpis-user"><?php useravatar ?></div>
<div class="bpis-title"><?php titel vom bild ?></div>
</li>
<li>
<img alt="#" src="<?php bildpfad ?>" />
<div class="bpis-user"><?php useravatar ?></div>
<div class="bpis-title"><?php titel vom bild ?></div>
</li>
<li>
<img alt="#" src="<?php bildpfad ?>" />
<div class="bpis-user"><?php useravatar ?></div>
<div class="bpis-title"><?php titel vom bild ?></div>
</li>
</ul>: css
ul#bpimageslider {
height: 300px;
position: relative;
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
}
ul#bpimageslider img {
position: relative;
z-index: 1;
}
ul#bpimageslider .bpis-user {
position: absolute;
right: 10px;
bottom: 10px;
width: 100px;
height: 100px;
background: red;
z-index: 10;
color: #ffffff;
}
ul#bpimageslider .bpis-title {
position: absolute;
left: 10px;
bottom: 10px;
background: green;
z-index: 10;
color: #ffffff;
padding: 3px 8px;
}: javascript für den slider. prinzip simpel. 1. fade das erste li-element ein 2. zeige es für eine bestimmte zeit an 3. fade es aus und dann diese schleife mit dem nächsten li-element. Nach dem durchlauf gehts von vorne los.
jQuery(document).ready(function() {
jQuery(function () {
var change_img_time = 5000;
var transition_speed = 300;
var simple_slideshow = jQuery("#bpimageslider"),
listItems = simple_slideshow.children('li'),
listLen = listItems.length,
i = 0,
changeList = function () {
listItems.eq(i).fadeOut(transition_speed, function () {
i += 1;
if (i === listLen) {
i = 0;
}
listItems.eq(i).fadeIn(transition_speed);
});
};
listItems.not(':first').hide();
setInterval(changeList, change_img_time);
});
});