How to display random pictures from the Xoops Myalbum module in a block with a fade out effect. - Modules - XOOPS News

XOOPS

News

News World of XOOPS Developers Hacks Themes Archive Submit News

Modules: How to display random pictures from the Xoops Myalbum module in a block with a fade out effect.

Posted by: hervetOn 2006/5/18 18:04:08 8147 reads

Recently, I had to find a way to display pictures from the Xoops Myalbum module in a random way with a fade out effect.

You will find on my homepage an example of the final rendering (in the right column)

The myalbum module already come with a block wich enable you to display random pictures but it is necessary to reload the page to see the pictures change.

Read the full story here

bye,
Hervé

The comments are owned by the author. We aren't responsible for their content.

Re: How to display random pictures from the Xoops Myalbum...

Will_H Published 05/18/2006 18:37 Friend of XOOPS Joined 10/10/2004 Comments 1786

Very nice, I have been having trouble implementing the .js while it worked it always contained errors.

Thanks very useful.

Re: How to display random pictures from the Xoops Myalbum...

irmtfan Published 05/19/2006 6:51 Updated 05/19/2006 6:52 Module Developer Joined 12/07/2003 Comments 3419

a perfect site:
http://www.dhtmlgoodies.com/
i add to my bookmarks.
i wish XOOPS ( core ,core module , 3rd party mpdules) use some of these scripts in the future versions, for example:
tooltips and highlight search keywords:
https://sourceforge.net/tracker/index.php?func=detail&aid=1485320&group_id=41586&atid=430843

Re: How to display random pictures from the Xoops Myalbum...

Bowromir Published 05/19/2006 8:22 Just popping in Joined 09/08/2004 Comments 19

Thank you!! very usefull indeed

Re: How to display random pictures from the Xoops Myalbum...

slyss Published 05/19/2006 10:02 Quite a regular Joined 01/26/2006 Comments 343

in my site don't work...

i have enable php debug:

Parse error: parse error, unexpected '*' in /home/stefanos/public_html/site/class/xoopsblock.php(157) : eval()'d code on line 162

in my TEST_site all work good...

do you know why ?

thanks

Re: How to display random pictures from the Xoops Myalbum...

irmtfan Published 05/19/2006 13:50 Module Developer Joined 12/07/2003 Comments 3419

it seems you have an exceed '*' somewhere.
copy&paste your code here the we can see if there is any error

Re: How to display random pictures from the Xoops Myalbum...

slyss Published 05/19/2006 13:52 Updated 05/19/2006 13:58 Quite a regular Joined 01/26/2006 Comments 343

this is my code...

it's the same of my test_site...


$header = <<<fintexte

<style type="text/css">

    #imageSlideshowHolder{

        margin:5px;    /* "Air" */

        width:141px;    /* Image width */

        height:100px;    /* 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, 12);

$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]">

    </div>

<script type="text/javascript">

initImageGallery();    // Initialize the gallery

</script>

fintexte;

echo $header2;

Re: How to display random pictures from the Xoops Myalbum...

irmtfan Published 05/20/2006 16:58 Updated 05/20/2006 17:00 Module Developer Joined 12/07/2003 Comments 3419

and do you have the thumbs directory with all pictures there?

/uploads/thumbs/*.* ? */

Re: How to display random pictures from the Xoops Myalbum...

boudewijn Published 08/27/2006 11:10 Updated 08/27/2006 11:11 Just popping in Joined 05/24/2006 Comments 1

hello!

I cant get it to work either.

Ive used it in my test site test.php, and then it works. But when I want it to use in a block in XOOPS it doesn't. The image doesn't display.(red cross)

My question is how to use it as a custom block. I currently use the blocks of TinyD. Ive put al the javascripting in the themehtml which is:module/templates/blocks/tinycontent1_nav_block.html
this one is right because it displays my wanted text.

the php code I put in module/blocks/tinycontent_content.php
when I use echo $lesimages[2]; it correcly displays the filelocation, but in the middle of the page.

its seems like the block doesn't get the php information with the correct filelocation.

with my test.php site this works:
$images = glob(pictures/*umb.*'); (my wanted files end up with thumb.jpg)

with my block I use this:
$images = array();
$images = glob(XOOPS_ROOT_PATH.'/modules/Gallery-TD1/pictures/*umb.*');
srand((double) microtime() * 10000000);
$tbluneimage = array();
$tbluneimage = array_rand($images, 6);
$lesimages = array();
foreach($tbluneimage as $uneimage) {
$lesimages[] = XOOPS_ROOT_PATH.'/modules/Gallery-TD1/pictures/'.basename($images[$uneimage]);
}

Anyone ideas? How to use a block with php,html and javascript together?*/

Login

Username

Password

Remember me

Search

Advanced Search

Donat-O-Meter

Stats
Goal:	$100.00
Due Date:	Apr 30
Gross Amount:	$0.00
Net Balance:	$0.00
Left to go:	$100.00

Latest GitHub Commits

{{ record.sha.slice(0, 7) }} - {{ record.commit.message | truncate }}

{{ record.commit.author.name }} {{ record.commit.author.date | formatDate }}

Modules: How to display random pictures from the Xoops Myalbum module in a block with a fade out effect.

Re: How to display random pictures from the Xoops Myalbum...

Re: How to display random pictures from the Xoops Myalbum...

Re: How to display random pictures from the Xoops Myalbum...

Re: How to display random pictures from the Xoops Myalbum...

Re: How to display random pictures from the Xoops Myalbum...

Re: How to display random pictures from the Xoops Myalbum...

Re: How to display random pictures from the Xoops Myalbum...

Re: How to display random pictures from the Xoops Myalbum...

Login

Search

Recent Comments

Re: XOOPS 2.5.11 Final Released

Re: XOOPS 2.5.11 Final Released

Re: XOOPS 2.5.11 Final Released

Re: XOOPS 2.5.11 Final Released

Re: XOOPS 2.5.11 Final Released

Who's Online

Donat-O-Meter

Latest GitHub Commits

{{ record.sha.slice(0, 7) }} - {{ record.commit.message | truncate }}

Archives

News archives