Fork me on GitHub

Comment afficher aléatoirement des images en provenance de myalbum dans un bloc avec un effet de fondu ?

200623
Avril
  Anonyme Programmation, Hack, ... 3771
Programmation, Hack, ...

Bonjour,

C'est le sujet de mon dernier article dont je vous propose la la lecture à cette adresse.

Note vous pouvez aussi bien afficher des images en provenance du module myalbum que de tout autre module, comme smartpartner, xcgal etc.

A bientôt,
Hervé

Note: 10.00 (1 vote) - Noter cet article -

Partager Twitter Partagez cette article sur GG+
Format imprimable Envoyer cet article à un ami
Les commentaires appartiennent à leurs auteurs. Nous ne sommes pas responsables de leur contenu.
Supporter Xoops
Inscrit le: 09/01/2005
De: Breizh
Contributions: 16972
Kris Posté le: 23/04/2006 14:36  Mis à jour: 23/04/2006 14:36
 Re: Comment afficher aléatoirement des images en provenan...
Merci Hervé de tes découvertes
:xfsuper:
Admin Frxoops
Inscrit le: 16/05/2003
De: Rhone-Alpes
Contributions: 3504
alain01 Posté le: 23/04/2006 14:46  Mis à jour: 23/04/2006 14:46
 Re: Comment afficher aléatoirement des images en provenan...
Merci Hervé !
Et pour lier l'image en cliquant dans ton bloc vers l'image en taille normale ?
Semi pro
Inscrit le: 05/06/2004
De:
Contributions: 750
Niluge Posté le: 23/04/2006 16:07  Mis à jour: 23/04/2006 16:07
 Re: Comment afficher aléatoirement des images en provenan...
Ca ca doit etre plus dur...

Pcq le script charge toutes les images, et il met juste la transparence à fond sur toutes les autres images que celle affichée... mais les images sont là quand même, du coup si on met un lien quand on click on saura pas vraiment sur quelle image on clique... il faudrait traffiquer pas mal le script pour que ca soit possible...
Semi pro
Inscrit le: 04/08/2005
De: Quelque part dans les étoiles...
Contributions: 1141
xmouse Posté le: 25/04/2006 10:31  Mis à jour: 25/04/2006 10:31
 Re: Comment afficher aléatoirement des images en provenan...
Super boulot... et marche nickel... Seul petit bémol les images doivents impérativement se trouver dans le dossier /uploads/thumbs/, sinon ça marche pas...

:xfsuper:
Xoops accro
Inscrit le: 15/07/2004
De:
Contributions: 4763
blueteen Posté le: 25/04/2006 14:13  Mis à jour: 25/04/2006 14:13
 Re: Comment afficher aléatoirement des images en provenan...
super boulot !

xmouse> si, tu peux placer les images où tu le souhaites, il faut juste modifier le script en fonction de ton dossier !

ex : http://xoops.valentinois.net/

j'ai placé les images à la racine du site, dans un dossier images_block

et j'ai indiqué ces valeurs dans le script, pour pointer sur ce dossier :

$images glob(XOOPS_ROOT_PATH.'/images_block/*.*');


et

$lesimages[] = XOOPS_URL.'/images_block/'.basename($images[$uneimage]);
Semi pro
Inscrit le: 04/08/2005
De: Quelque part dans les étoiles...
Contributions: 1141
xmouse Posté le: 25/04/2006 14:54  Mis à jour: 25/04/2006 14:54
 Re: Comment afficher aléatoirement des images en provenan...
Salut blueteen,

c'est ce que j'ai essayé de faire et les images ne s'affichent pas...

Bizzare...
Xoops accro
Inscrit le: 15/07/2004
De:
Contributions: 4763
blueteen Posté le: 25/04/2006 15:38  Mis à jour: 25/04/2006 15:38
 Re: Comment afficher aléatoirement des images en provenan...
Pour ne pas nous étendre en technique ici, j'ai ouvert un fil :
http://www.frxoops.org/modules/newbb/ ... at&topic_id=13542&forum=5
si tu as un lien vers ton bloc, pour qu'on voit ça de plus près

Hervé, si tu veux y faire un saut, j'ai fait 2 petites modifications à ton code.

alain01> je vais voir pour les liens vers les grandes images tant qu'à faire
Anonyme Posté le: 25/04/2006 18:08  Mis à jour: 25/04/2006 18:08
 Re: Comment afficher aléatoirement des images en provenan...
xmouse,

A tu au moins pris le temps de lire le contenu de l'article ?
Il est marqué :
Citation :

Remplacez XOOPS_UPLOAD_PATH.'/thumbs/ avec l'emplacement de vos vignettes
Semi pro
Inscrit le: 04/08/2005
De: Quelque part dans les étoiles...
Contributions: 1141
xmouse Posté le: 26/04/2006 09:39  Mis à jour: 26/04/2006 09:39
 Re: Comment afficher aléatoirement des images en provenan...
Salut à tous,

J'ai bien lu entièrement l'article, je l'ai même imprimé et écrit manuellement pour ne pas oublier les quelques modifications à faire....

Le bloc est visible en bas à droite de cette adresse : http://www.bluestar-hunting.com.

Le code de mon bloc :

Citation :

$header = <<<fintexte
<style type="text/css">
#imageSlideshowHolder{
margin:14px; /* "Air" */
width:141px; /* Image width */
height:113px; /* Image height */
position:relative; /* Don't remove this line */
}

/* Don't change these values */
#imageSlideshowHolder img{
position:absolute;
left:0px;
top:0px;
}
</style>
<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

************************************************************************************************************/

var slideshow2_noFading = false;
var slideshow2_timeBetweenSlides = 1000; // Amount of time between each image(1000 = 1 second)
var slideshow2_fadingSpeed = 10; // Speed of fading (Lower value = faster)

var slideshow2_galleryContainer; // Reference to the gallery div
var slideshow2_galleryWidth; // Width of gallery
var slideshow2_galleryHeight; // Height of galery
var slideshow2_slideIndex = -1; // Index of current image shown
var slideshow2_slideIndexNext = false; // Index of next image shown
var slideshow2_imageDivs = new Array(); // Array of image divs(Created dynamically)
var slideshow2_currentOpacity = 100; // Initial opacity
var slideshow2_imagesInGallery = false; // Number of images in gallery
var Opera = navigator.userAgent.indexOf('Opera')>=0?true:false;
function createParentDivs(imageIndex)
{
if(imageIndex==slideshow2_imagesInGallery){
showGallery();
}else{
var imgObj = document.getElementById('galleryImage' + imageIndex);
if(Opera)imgObj.style.position = 'static';
slideshow2_imageDivs[slideshow2_imageDivs.length] = imgObj;
imgObj.style.visibility = 'hidden';
imageIndex++;
createParentDivs(imageIndex);
}
}

function showGallery()
{
if(slideshow2_slideIndex==-1)slideshow2_slideIndex=0; else slideshow2_slideIndex++; // Index of next image to show
if(slideshow2_slideIndex==slideshow2_imageDivs.length)slideshow2_slideIndex=0;
slideshow2_slideIndexNext = slideshow2_slideIndex+1; // Index of the next next image
if(slideshow2_slideIndexNext==slideshow2_imageDivs.length)slideshow2_slideIndexNext = 0;

slideshow2_currentOpacity=100; // Reset current opacity

// Displaying image divs
slideshow2_imageDivs[slideshow2_slideIndex].style.visibility = 'visible';
if(Opera)slideshow2_imageDivs[slideshow2_slideIndex].style.display = 'inline';
if(navigator.userAgent.indexOf('Opera')<0){
slideshow2_imageDivs[slideshow2_slideIndexNext].style.visibility = 'visible';
}

if(document.all){ // IE rules
slideshow2_imageDivs[slideshow2_slideIndex].style.filter = 'alpha(opacity=100)';
slideshow2_imageDivs[slideshow2_slideIndexNext].style.filter = 'alpha(opacity=1)';
}else{
slideshow2_imageDivs[slideshow2_slideIndex].style.opacity = 0.99; // Can't use 1 and 0 because of screen flickering in FF
slideshow2_imageDivs[slideshow2_slideIndexNext].style.opacity = 0.01;
}


setTimeout('revealImage()',slideshow2_timeBetweenSlides);
}

function revealImage()
{
if(slideshow2_noFading){
slideshow2_imageDivs[slideshow2_slideIndex].style.visibility = 'hidden';
if(Opera)slideshow2_imageDivs[slideshow2_slideIndex].style.display = 'none';
showGallery();
return;
}
slideshow2_currentOpacity--;
if(document.all){
slideshow2_imageDivs[slideshow2_slideIndex].style.filter = 'alpha(opacity='+slideshow2_currentOpacity+')';
slideshow2_imageDivs[slideshow2_slideIndexNext].style.filter = 'alpha(opacity='+(100-slideshow2_currentOpacity)+')';
}else{
slideshow2_imageDivs[slideshow2_slideIndex].style.opacity = Math.max(0.01,slideshow2_currentOpacity/100); // Can't use 1 and 0 because of screen flickering in FF
slideshow2_imageDivs[slideshow2_slideIndexNext].style.opacity = Math.min(0.99,(1 - (slideshow2_currentOpacity/100)));
}
if(slideshow2_currentOpacity>0){
setTimeout('revealImage()',slideshow2_fadingSpeed);
}else{
slideshow2_imageDivs[slideshow2_slideIndex].style.visibility = 'hidden';
if(Opera)slideshow2_imageDivs[slideshow2_slideIndex].style.display = 'none';
showGallery();
}
}

function initImageGallery()
{
slideshow2_galleryContainer = document.getElementById('imageSlideshowHolder');
slideshow2_galleryWidth = slideshow2_galleryContainer.clientWidth;
slideshow2_galleryHeight = slideshow2_galleryContainer.clientHeight;
galleryImgArray = slideshow2_galleryContainer.getElementsByTagName('IMG');
for(var no=0;no<galleryImgArray.length;no++){
galleryImgArray[no].id = 'galleryImage' + no;
}
slideshow2_imagesInGallery = galleryImgArray.length;
createParentDivs(0);

}

</script>
fintexte;

echo $header;

$images = array();
$images = glob(XOOPS_UPLOAD_PATH.'/thumbs/*.*');
srand((double) microtime() * 10000000);
$tbluneimage = array();
$tbluneimage = array_rand($images, 21);
$lesimages = array();
foreach($tbluneimage as $uneimage) {
$lesimages[] = XOOPS_UPLOAD_URL.'/thumbs/'.basename($images[$uneimage]);
}

$header2 = <<<fintexte
<div id="imageSlideshowHolder">
<img src="$lesimages[0]">
<img src="$lesimages[1]">
<img src="$lesimages[2]">
<img src="$lesimages[3]">
<img src="$lesimages[4]">
<img src="$lesimages[5]">
<img src="$lesimages[6]">
<img src="$lesimages[7]">
<img src="$lesimages[8]">
<img src="$lesimages[9]">
<img src="$lesimages[10]">
<img src="$lesimages[11]">
<img src="$lesimages[12]">
<img src="$lesimages[13]">
<img src="$lesimages[14]">
<img src="$lesimages[15]">
<img src="$lesimages[16]">
<img src="$lesimages[17]">
<img src="$lesimages[18]">
<img src="$lesimages[19]">
<img src="$lesimages[20]">
</div>
<script type="text/javascript">
initImageGallery(); // Initialize the gallery
</script>
fintexte;
echo $header2;


Mais c'est pas grave.... L'essentiel, c'est que ça marche....

@+++
Xoops accro
Inscrit le: 15/07/2004
De:
Contributions: 4763
blueteen Posté le: 26/04/2006 11:29  Mis à jour: 26/04/2006 11:29
 Re: Comment afficher aléatoirement des images en provenan...
salut !
ce n'est pas vraiment pour les questions techniques.
mais quel est le souci avec ton code ?
celui que tu donnes là est celui avec le chemin d'origine. (et il marche sur ton site comme tu le dis).
donc si tu as un souci en utilisant d'autres dossiers, poste le code qui te pose problème, et laisse nous voir le problème sur ton site en live !
pour le chemin, il y a 2 lignes à modifier.
et ma main (gauche) à couper que tu notes mal l'une des deux
Semi pro
Inscrit le: 04/08/2005
De: Quelque part dans les étoiles...
Contributions: 1141
xmouse Posté le: 26/04/2006 15:21  Mis à jour: 26/04/2006 15:21
 Re: Comment afficher aléatoirement des images en provenan...
Salut blueteen,

Comme tu le dis si bien, pour le chemin il n'y a que deux lignes à modifier. Et en les modifiants les images ne s'affichent plus. Bien entendu, les dossiers et les images existent !!!

Je mets bien les deux même chemins....

Mais comme je disais plus haut, ce n'est plus vraiment un problème.

En tout cas, merci pour ton aide et celle des autres membres....

@+++

:xfsuper:
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

16 Personne(s) en ligne (3 Personne(s) connectée(s) sur Articles) | Utilisateur(s): 0 | Invité(s): 16 | Plus ...