[BBcode] Highslide JS

[Dga]

Avec votre adaptation pour les images attaché sa ma donné une petit idée pour l'ajouté en bbcode, je sais pas si c'est très propre la façon dont j'ai procédè donc tout conseil sont les bienvenue ;)

-Tout d'abord téléchargez Highslide JS (http://vikjavev.no/highslide/) gratuitement.
-Dezipper le .rar puis copier/coller le dossier higslide dans la racine de votre forum
-Ensuite direction le panel d'admin
-Balise BB personnalisées --> Ajouter une nouvelle balise BB

Intitulé: Hightslide
Balise: HS
Code:

Version avec miniature:
<script type="text/javascript" src="highslide/highslide.js"></script>

<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
window.onload = function() {
hs.preloadImages(5);
}
</script>

<style type="text/css">
* {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid silver;
}

.highslide-image {
border-bottom: 1px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;

border-bottom: 1px solid white;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: silver;
}
.highslide-loading {
display: block;
color: white;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: black;
/*
padding-left: 22px;
background-image: url(highslide/graphics/loader.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
*/
}

a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
</style>

<a href="{param}" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">
<img src="{option}" alt="Highslide JS"
title="Click to enlarge" height="80" width="120" /></a>Example:
Utiliser un second paramètre {option}: Oui

Comment ça marche:
L'url de votre image reduit correspond à {option}
L'url de l'image taille réelle correspond à {param}

Ce qui nous donne:
[HS=http://www.monsite.tld/images/thumb.ext]http://www.monsite.tld/images/full.ext

Version sans miniature:
<script type="text/javascript" src="highslide/highslide.js"></script> <script type="text/javascript"> hs.graphicsDir = 'highslide/graphics/'; window.onload = function() { hs.preloadImages(5); } </script> <style type="text/css"> * { font-family: Verdana, Helvetica; font-size: 10pt; } .highslide { cursor: url(highslide/graphics/zoomin.cur), pointer; outline: none; } .highslide img { border: 2px solid gray; } .highslide:hover img { border: 2px solid silver; } .highslide-image { border-bottom: 1px solid white; } .highslide-image-blur { } .highslide-caption { display: none; border-bottom: 1px solid white; font-family: Verdana, Helvetica; font-size: 10pt; padding: 5px; background-color: silver; } .highslide-loading { display: block; color: white; font-size: 9px; font-weight: bold; text-transform: uppercase; text-decoration: none; padding: 3px; border-top: 1px solid white; border-bottom: 1px solid white; background-color: black; /* padding-left: 22px; background-image: url(highslide/graphics/loader.gif); background-repeat: no-repeat; background-position: 3px 1px; */ } a.highslide-credits, a.highslide-credits i { padding: 2px; color: silver; text-decoration: none; font-size: 10px; } a.highslide-credits:hover, a.highslide-credits:hover i { color: white; background-color: gray; } .highslide-display-block { display: block; } .highslide-display-none { display: none; } </style> <a href="{param}" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"> <img src="{param}" alt="Highslide JS" title="Click to enlarge" height="80" width="120" /></a>

Utilisation:
http://www.monsite.tld/images/full.ext

Version sans miniature avec un texte
<script type="text/javascript" src="highslide/highslide.js"></script> <script type="text/javascript"> hs.graphicsDir = 'highslide/graphics/'; window.onload = function() { hs.preloadImages(5); } </script> <style type="text/css"> * { font-family: Verdana, Helvetica; font-size: 10pt; } .highslide { cursor: url(highslide/graphics/zoomin.cur), pointer; outline: none; } .highslide img { border: 2px solid gray; } .highslide:hover img { border: 2px solid silver; } .highslide-image { border-bottom: 1px solid white; } .highslide-image-blur { } .highslide-caption { display: none; border-bottom: 1px solid white; font-family: Verdana, Helvetica; font-size: 10pt; padding: 5px; background-color: silver; } .highslide-loading { display: block; color: white; font-size: 9px; font-weight: bold; text-transform: uppercase; text-decoration: none; padding: 3px; border-top: 1px solid white; border-bottom: 1px solid white; background-color: black; /* padding-left: 22px; background-image: url(highslide/graphics/loader.gif); background-repeat: no-repeat; background-position: 3px 1px; */ } a.highslide-credits, a.highslide-credits i { padding: 2px; color: silver; text-decoration: none; font-size: 10px; } a.highslide-credits:hover, a.highslide-credits:hover i { color: white; background-color: gray; } .highslide-display-block { display: block; } .highslide-display-none { display: none; } </style> <a href="{param}" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"> <img src="{param}" alt="Highslide JS" title="Click to enlarge" height="80" width="120" /></a>
<div class='highslide-caption' id='caption1'>
{option}
</div>
Utilisation:
http://www.monsite.tld/images/full.ext


Demo:
http://clan.berserkers.free.fr/forum/showthread.php?goto=newpost&t=314

[Ombre]

Merci, je testerais plus tard :)

[dhaimy]

pas mal merci

[Allan]

Merci du partage ;)

[dhaimy]

ca marche pas chez moi

[Dga]

est ce que tu as bien copier/coller le dossier higslide dans la racine de ton forum ?

[dhaimy]

es que tu as bien copier/coller le dossier higslide dans la racine de ton forum ?

oui jai mes ca (highslide) merci pour ton aide

[Raz]

J'ai pas extremement bien compris a quoi cela sert ! Pourriez vous me definir rapidement et simplement !

[Dga]

Ups c'est vrai que j'ai pas expliquez en quoi sa consiter ^^

Une petite demo
http://clan.berserkers.free.fr/forum/showthread.php?goto=newpost&t=314

En faite sa permet d'afficher une miniature (image) relinker sur une image de taille réelle avec un effet plutôt sympa ^^

[Svensum41]

C'est nikel ca :D Ca va me remplacer le hack Redimensionnemetn d'image :D

[Dga]

Voilà, étant donné que mes membres sont plutôt feignant ^^"

j'ai ajouter une version sans miniature (celle crée par le posteur, l'image complete sera redimensionné)
et une autre avec un texte en bas.

[Svensum41]

Dit tu met quoi dans Code de Remplacement et Exemple ?

[Dga]

dans code remplacement tu copie/colle un des trois code (visible en haut)
Exemple: [HS]

[Ramses]

Super pratique en effet

Mais comment faire pour ouvrir l'image dans une autre page ?

[Sofia]

Superbe effet, merci à toi, j'aime beaucoup ;)

[Ramses]

Pour ceux que cela pourrais intéressé, voila une petite image pour cette balise

[Ombre]

Pour ceux que cela pourrais intéressé, voila une petite image pour cette baliseLol le jaune qui tue :D je met ça sur mon forum et ils vont tous appuyer dessus et oubliés les autres bbcodes :D merci pour les autre tout de meme :p

[Svensum41]

j'ai trouvé mieux :D

Mattez moi ca :

[Dga]

Ha oui celui là va bien :)

[Ramses]

Super pratique en effet

Mais comment faire pour ouvrir l'image dans une autre page ?

Personne n'aurait une petite idée ?

[Ombre]

Oui tip top celui là discret ;) bon je test le tout dans la semaine, si il y a une erreur je re sort le fouet Dga :p bonne soirée à vous :)

[Svensum41]

tu met un target="_blank" ?

enfin je suis pas sur je vais tester


EDIT : Nop ca ne fonctionne pas ^^

[Ramses]

Merci quand meme d'avoir essayer

Faudrait que l'auteur puisse voir cela

[Dga]

bah si tu veux que sa s'ouvre dans une autre fenêtre sa va perdre son intérêt ^^

[Ramses]

Le problème c'est que sur mon forum, je n'ai pas le meme effet qu'ici. C'est pour cela

[Dga]

C'est à dire ?

Sinon voilà pour l'ouvrir dans une nouvelle fenêtre

<a href="{param}" target="blank"><img src="{param}" height="80" width="120" /></a>

Mais bon là sa n'a plus rien avoir ^^ c'est plus traditionnel :p

[Ramses]

Merci à toi

[Kamatcho]

Merci c'est reussi.

Par contre pourrait tu me dire comment faire pour que dans une taille maximale que je choisit, l'image prenne une forme comme en taille réelle.

C'est a dire que maintenant j'ai une image peu haute, et très longue ( bannière 900x150 ) et puis elle m'aparait en carré en miniature.
Aurait il un moyen d'adapter un peu la forme a celle d'origine, comme sur le hack [MINI] ???

Merci

[Bolo]

Salut tlm,
Merci pour avoir partager ce codeBB ,
J'ai l'ai essayer mais je me suis bloquer a 2 niveaux :
"description" qu'est-ce que je dois mettre ?

"url de l'image (facutatif)" qu'est ce que je dois mettre aussi svp ?

Et à partir de "comment ça marche ?", je n'est pas vraiment compris les exemples , url entre deux balises ...
Merci d'avance

[Ombre]

Slt :)

Pour la description c'est simple tu mets ce que tu veux, decrit a quoi sert ce BBcode :)
exemple: "Permet de redimenssionner les images avec un effets highslide."

Pour ce qui est de l url de l'image ça te permet de voir apparaitre ce bbcode a coter des autres dans la partie d"edition de tes topics :) une sorte de bouton en image...

Comment ça marche:
L'url de votre image reduit correspond à {option}
L'url de l'image taille réelle correspond à {param}

Ce qui nous donne:
http://www.monsite.tld/images/full.ext

Ne prete pas attention a cela tout ce fait automatiquement en faite pour tes pieces jointes ;)

[Bolo]

Salut Jolinarys
Merci bcp pour ta réponse .
Je pense que le code n'est pas compatible avec la version 3.5.4 .
Peux-tu le réctifier pour qu'il soit compatible stp ? Juste le code .
Merci bcp

[Ombre]

Demande a DGA pour cela :) sinon je pense que si tu cherche il n y a pas obligatoirmeent besoin de bbcode pour le highslide ;) vas sur le site de l editeur ;)

[Dga]

Il utilise aucune variable de vB donc soit tu as bien suivit l'installation soit ton navigateur n'accepte pas le javascript soit je sais pas ^^'

[jeff_u_corsu]

Un grand merci a toi ;)

[Ilan]

merci pour le partage !
mais ça fonctionne qu'avec des images uploadées en local ? sur le serveur ?
est ce que c'est censé fonctionner avec des liens ?
merci

[notrepass]

Merci

mais comment peut en intégrer cet effet d'ajax en utilisant un module ou produit pour que ça soit automatique avec n'importe quelle image sur le forum

[Ombre]

Il existe un hack pour cela, regarde du coter des hack de megatekno http://www.vbulletin-ressources.com/forum/showthread.php?t=5108&highlight=highslide