Zorrito studio : Developpeur web 2.0, wordpress, webdesign, xhtml / css » Codage

Animations jquery (images animées jquery)

zorrito — Tue, 05 Jan 2010 12:56:53 +0000

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.

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

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

Effet de zoom en CSS

zorrito — Wed, 16 Dec 2009 10:30:24 +0000

DemoTel

Affichage de nos réalisations en html

Nous allons mettre en place une liste en utilisant les balises

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 de notre page html nous allons afficher le code ci-dessous.

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

Miniature wp-postratings

zorrito — Tue, 02 Jun 2009 08:39:40 +0000

Dans notre cas, nous allons modifier le script pour cette fonction ### Function: Display Highest Rated Page/Post

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.

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

No related posts.

CSV vers MySQL (correspondance des colonnes)

zorrito — Tue, 28 Apr 2009 08:29:13 +0000

Imaginons la structure suivant pour notre base de donnée.

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.

Miniature wp-postratings

Coverflow mootools – MooFlow

zorrito — Wed, 22 Apr 2009 07:00:28 +0000

Pré-requis

Après avoir inclus tout les fichiers nécessaires au bon fonctionnement de ce coverflow (vous pouvez voir cela en téléchargeant les sources en bas de cet article), il devient très facile de réaliser votre effet.

Inclusion javascript pour les définir les options du coverflow

Vous trouverez la documentation ici même.

Création du coverflow

Le petit bout de code ci-dessous permet ensuite de créer le coverflow.

Démos

Vous pouvez télécharger les fichiers d’example et voir une démo.

Vous trouverez d’autres démonstrations directement sur le site de MooFlow.

Coverflow Ajax

Cookie jquery pour style switcher

zorrito — Thu, 16 Apr 2009 15:34:36 +0000

1 – Pré-requis

Vous devez tout d’abord télécharger Jquery ainsi que le javascript de gestion des cookies.

Vous devez insérer le code suivant pour prendre en compte ces fichiers javascript.

$.cookie('cookie'); // récupérer cookie
$.cookie('cookie', 'valeur'); // créer un cookie avec une valeur
$.cookie('cookie', 'valeur'', { expires: 7 }); // créer un cookie avec une expiration dans 7 jours
$.cookie('cookie', '', { expires: -1 }); // effacer cookie

2 – Deux affichages différents pour les news

Voici un code basique permettant de créer un affichage normal de news comportant un titre, une image et un contenu; un second affichage de type liste ou seul le titre est présent.


Titre du poste  
Texte Texte Texte Texte Texte Texte Texte
Texte Texte Texte Texte Texte Texte Texte
Titre du poste 1 
Texte Texte Texte Texte Texte Texte Texte
Texte Texte Texte Texte Texte Texte Texte


Titre du poste 
Titre du poste 1

3 – Gestion de l’affichage lors de l’accès au site

Il va falloir récupérer le cookie et stocker la valeur de ce dernier dans une variable javascript.

Zorrito studio : Developpeur web 2.0, wordpress, webdesign, xhtml / css » Codage

featured content jquery ajax (mise en avant)

Feature List : Site Démo

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