Il est très complet, vue par jours, semaines, mois, interface très pratique pour ajouter des évènements, drag and drop, enfin la totale.

Voici un petit aperçu de l’interface.

Voici tout le nécessaire pour ce plugin.

Vous trouverez tout ce qu’il faut dans le fichier zip pour interfacer le calendrier avec PHP-MySQL (lire le readme).

No related posts.

(OSM) player : Site

FlareVideo : Site

VideoJS : Site

HTML5 Video : Site

Video for everybody : Site

Je n’ai aucun avis tranché sur lequel utilisé, a vous d’aller visiter chaque site et faire votre choix selon vos contraintes.
J’ai quand même un petit faible pour SublimeVideo et videoJS si je ne me trompe pas qui doivent supporter tout les gros browser car ils affichent la vidéo en flash si le navigateur ne supporte pas le HTML5.

No related posts.

Bluelight

London creative

ShapeShifter

Folio theme

Levitation

Pandora

Unite

Barely

Bravissimo

The Deluxe Business

Strokes

Related posts:

1. Jolis thèmes premium wordpress

Slick Auto-Playing Featured Content Slider Site Démo

Feature list Site Démo

Featured Content Slider Site Démo

JC Play List Site Démo

Content Slider avec jFlow Site Démo

No related posts.

Dans un premier temps nous allons mettre en place la carte postale ainsi que les images qui vont la composer.

Nous avons donc un conteneur qui fera office de cadre pour la carte postale et 4 autres div qui contiendront des images.

<div id="content">
<div id="nuage1"><img src="images/nuage1.png"/></div>
<div id="nuage2"><img src="images/nuage2.png"></div>
<div id="zorritostudio"><img src="images/zs.png"></div>
<div id="zorrito"><img src="images/zorrito.png"></div>
</div>

Voici le code CSS qui permet de positionner les images.

#content{
position:relative;
width:629px;
height:400px;
top:30px;
/*overflow:hidden; */ on met cette propriété en commentaire pour voir ou sont positionnées nos images.
border:5px solid #C7C7C7;
background: url(images/bg.jpg);
} 

#nuage1{
position:absolute;
top:80px;
left:-140px; /*en dehors de l'image pour le faire apparaitre de gauche à droite*/
z-index:1;
}

#nuage2{
position:absolute;
top:10px;
left:-120px;
z-index:1;
} 

#zorrito{
position:absolute;
top:30px;
left:-240px;
z-index:2;
} 

#zorritostudio{
position:absolute;
top:-80px;
left:240px;
z-index:2;
}

A ce stade vous devriez avoir quelque chose qui ressemble à ceci.

Il ne reste plus qu’à animer tout ceci en utilisant jquery.

Dans un premier temps pensez à décommenter la propriété overflow pour #content.
Voici notre code javascript commenté.

<script type="text/javascript">
$(document).ready(function() {
animation();
});

function animation(){
nuage1();
zorrito();
zorritostudio();
nuage2();
}

function zorrito(){
//le petit renard va se déplacer de la position défini dans le css (hors du cadre) jusqu'à 20px de la gauche du cadre avec un effet de rebond.
$("#zorrito").animate({left: '20px' }, {queue:false, duration:1000, easing:'easeOutBounce'});
}

function zorritostudio(){
//le setTimeout nous permet de faire un effet infini (le 4000 vient du 2000 + 2000)
 $("#zorritostudio").animate({top: '180px' }, {queue:false, duration:1000, easing:'easeOutBounce'});
 $("#zorritostudio").animate({opacity:1},2000).animate({opacity:0.1}, 2000)
 setTimeout("zorritostudio()",4000);
}

function nuage1(){
 $("#nuage1").animate({left:"+=950px"},7000).animate({left:"-140px"}, 0)
 setTimeout("nuage1()",7000);
}

function nuage2(){
 $("#nuage2").animate({left:"+=950px"},5000).animate({left:"-120px"}, 0)
 setTimeout("nuage2()",5000);
}
</script>

On obtient une belle petite animation qui nous fait penser à un flash mais très simple :)

Related posts:

1. Effet de zoom en CSS
2. Cookie jquery pour style switcher

Cette extension a l’avantage d’être totalement gratuite contrairement à l’autre extension dont nous allons parler par la suite.

Vous pouvez voir sur ce gif animé l’étendu des possibilités offertes par ce plugin; 90% des tags sont supportés selon l’auteur.

Themedreamer

Cette extension est beaucoup plus complète que celle du dessus, mais cela a un cout (30$); voici quelques unes des fonctionnalités phares de celle ci.

Elle permet de voir en temps réel le design de son thème.

Auto-complétion du code.

Pour voir la totalité des options offertes par Themedreamer je vous renvois sur cette page.

Vous trouverez ci-dessous deux vidéos de Themedreamer en action.

No related posts.

Affichage de nos réalisations en html

Nous allons mettre en place une liste en utilisant les balises <ul> et <li>

<ul id="bulle">
<li>
<a href="images/muchas_m.jpg" title="Muchas maracas">
<img src="images/muchas.png" alt="Muchas maracas" />
<img src="images/muchas_large.png" alt="Muchas maracas" />
</a>
</li>
<li>
<a href="images/nteam_m.jpg" title="nteam">
<img src="images/nteam.png" alt="nteam" />
<img src="images/nteam_large.png" alt="nteam" />
</a>
</li>
<li>
<a href="images/lagedor_m.jpg" title="l'age d'or">
<img src="images/ageor.png" alt="l'age d'or" />
<img src="images/ageor_large.png" alt="l'age d'or" />
</a>
</li>
</ul>

Mise en forme de cette liste grâce au CSS.

Le code CSS ne comporte rien de vraiment spécifique et compliqué.

#bulle {
list-style: none;
margin: 20px 0px 0px;
padding: 0px;
}
#bulle li {
display: inline-block;
margin: 0px 5px;
padding: 0px;
width: 72px;
height: 72px;
}

#bulle li a img {
position: relative;
border: none;
}

#bulle li a img.large {
display: none;
}

#bulle li a:hover img.small {
display: none;
z-index: 0;
}

#bulle li a:hover img.large {
display: block;
margin-top: -28px;
margin-left: -28px;
z-index: 1000;
}

A ce stade nous avons bien l’effet de zoom qui est mis en ligne.

La dernière étape va consister à afficher dans une modalbox jquery le détail de la réalisation, dans la balise <head> de notre page html nous allons afficher le code ci-dessous.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css" media="screen" />
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.zoom").fancybox({
'overlayOpacity'    :    0.7,
'overlayColor'        :    '#FFF'
});
});
</script>

Voila c’est déjà fini, j’espère que l’effet vous plait.

Related posts:

1. Cookie jquery pour style switcher
2. Coverflow mootools – MooFlow
3. Animations jquery (images animées jquery)

AdvancePress

Aperturious 3-in-1

Black Aperture

Blackops 960.gs

Chronicle

Clean blog

Clean Slate

Convergence

CSS Gallery

DesignNews Community

Equator

Filthy

Future Blogger Community

Hemsida Blog Magazine

iMaxell

Imperial

Interfaces

Kratalistic

Mammoth

Membr

Monte Cristo

My wordpress

Network WP

Neulane

Noctis

Our magazine

Publication

SilverOak

Simplified

SOFA Panda

Sofa Rooster

Soft Light

Standard

Top Notch Showcase

Varnish

Vault 01

WebRider

Wordpress Glass

Wp-addiction

WP Color Video

Wp Photo

Related posts:

1. Thèmes premium wordpress

Ouvrez le fichier postratings-stats.php et allez à la ligne 217.
Nous allons trouver la requête qui nous permet d’aller récupérer les informations dans notre base de donnée, nous allons la modifier comme ci dessous.

$highest_rated = $wpdb->get_results("SELECT DISTINCT $wpdb->posts.*, (t1.meta_value+0.00) AS ratings_average, (t2.meta_value+0.00) AS ratings_users, (t3.meta_value+0.00) AS ratings_score , (t4.meta_value) AS image FROM $wpdb->posts LEFT JOIN $wpdb->postmeta AS t1 ON t1.post_id = $wpdb->posts.ID LEFT JOIN $wpdb->postmeta As t2 ON t1.post_id = t2.post_id LEFT JOIN $wpdb->postmeta AS t3 ON t3.post_id = $wpdb->posts.ID LEFT JOIN wp_postmeta AS t4 ON t4.post_id = wp_posts.ID WHERE t1.meta_key = 'ratings_average' AND t2.meta_key = 'ratings_users' AND t3.meta_key = 'ratings_score' AND t4.meta_key = 'image' AND $wpdb->posts.post_password = '' AND $wpdb->posts.post_date < '".current_time('mysql')."' AND $wpdb->posts.post_status = 'publish' AND t2.meta_value >= $min_votes AND $where ORDER BY $order_by DESC, ratings_users DESC LIMIT $limit");

Avec cette requête nous allons donc pouvoir récupérer l’url de notre miniature qui est contenu dans un champs personnalisé ‘image’.
Vous pouvez l’adapter à votre guise pour récupérer d’autres champs personnalisés par exemple.

Maintenant nous allons ouvrir le fichier wp-postratings.php et nous allons modifier la fonction function expand_ratings_template qui se trouve à partir de la ligne 934.

Par défaut nous avons ceci.

// Get post related variables
if(is_null($post_ratings_data)) {
$post_ratings_data = get_post_custom($post_id);
$post_ratings_users = intval($post_ratings_data['ratings_users'][0]);
$post_ratings_score = intval($post_ratings_data['ratings_score'][0]);
$post_ratings_average = floatval($post_ratings_data['ratings_average'][0]);
} else {
$post_ratings_users = intval($post_ratings_data->ratings_users);
$post_ratings_score = intval($post_ratings_data->ratings_score);
$post_ratings_average = floatval($post_ratings_data->ratings_average);
}

Nous allons le transformer comme ceci.

// Get post related variables
if(is_null($post_ratings_data)) {
$post_ratings_data = get_post_custom($post_id);
$post_ratings_users = intval($post_ratings_data['ratings_users'][0]);
$post_ratings_score = intval($post_ratings_data['ratings_score'][0]);
$post_ratings_average = floatval($post_ratings_data['ratings_average'][0]);
//MODIF ICI
$img = $post_ratings_data['image'][0];
} else {
$post_ratings_users = intval($post_ratings_data->ratings_users);
$post_ratings_score = intval($post_ratings_data->ratings_score);
$post_ratings_average = floatval($post_ratings_data->ratings_average);
//MODIF ICI
$img = $post_ratings_data->image;
}

Ensuite dirigez vous vers les lignes 1000 ou il y a une succession de str_replace.

Nous allons rajouter ceci.

$value = str_replace("%THUMB%", $img, $value);

Le tour est joué.
Dans les options de template de wp-postratings, vous allez pouvoir utiliser %THUMB% pour afficher une miniature de votre article.

<a href="%POST_URL%" title="%POST_TITLE%"><img class="top-articles" src="http://localhost/wordpress/wp-content/themes/votre theme/thumb.php?src=%THUMB%" alt="%POST_TITLE%"  width="91" height="67"/></a>

Le principe général est exposé, j’espère que cela vous aura été utile.

No related posts.

Voici celle de notre fichier texte.

Dans notre cas nous avons juste une inversion entre le nom et le téléphone.

Voici comment nous allons procéder.

LOAD DATA INFILE 'fichier.csv' INTO TABLE `prospects` FIELDS TERMINATED BY 't' ENCLOSED BY ''  LINES TERMINATED BY 'rn' IGNORE 1 LINES (id,@telephone,nom,@date_naissance) SET date_naissance = DATE_FORMAT(STR_TO_DATE(@date_naissance,'%d/%m/%Y'),'%Y-%m-%d'), telephone = REPLACE(@telephone,' ','');

Je passe sur les différents paramètre comme FIELDS TERMINATED BY, ENCLOSED BY qui se comprennent très bien d’eux même.
Si ce n’est pas le cas vous pouvez aller jeter un coup d’oeil à la documentation MySQL.

Quand nous faisons ceci (id,@telephone,nom,@date_naissance), cela signifie que nous allons insérer la première colonne de notre CSV dans le champs id de notre table prospects, la deuxième colonne dans le champs telephone, ainsi de suite.

Cela ne permet donc bien de pouvoir insérer des données qui ne respecteraient pas forcement la structure de notre base de donnée mysql.

Les @ présents nous servent de « variables temporaires » afin de pouvoir faire des modifications sur les champs présents dans notre CSV afin de les insérer dans notre base de donnée une fois transformée.

SET date_naissance = DATE_FORMAT(STR_TO_DATE(@date_naissance,'%d/%m/%Y'),'%Y-%m-%d')

Le code ci-dessus nous permet d’insérer dans notre base de donnée MySQL, une date qui était au format français dans notre fichier CSV en format anglais.

telephone = REPLACE(@telephone,' ','')

Cela nous a permis d’insérer le téléphone qui possédait des espaces, dans notre champs téléphone (int 10).

J’espère que ces quelques petites astuces vous auront été nécessaires, vous devriez à présent pouvoir insérer tout et n’importe quoi à partir de votre fichier txt ou csv.

Related posts:

1. Miniature wp-postratings