Slider in Coppermine

[pbasmo]

Hello
I would like to share a slider that I integrated in my site.
You can see the result at http://pierre.basmoreau.free.fr
It is based on a Javascript code available free to http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm that I adapted to integrate it in coppermine. This site (dynamicdrive) is a true gold mine for the developers !

The script chooses pictures random from the database (15 by default) and to make them move (scrolling) of right to left.
Each picture of the slider has a direct link to the album. 15 new pics are shown with each loading of page.

I had tested the MOD "Image Scroller based one Filmstrip", but I wanted a slider less important in occupation of screen and with a random choice.

Here thus complete script called "slider.php" that you will place at the root of your site:

Code Select Expand


<?php
/****************************************************************************
slider.php

this script choose random pics (15 by default) from your coppermine album.
Each picture of the slider has a direct link to the album. 15 new pics are shown with each loading of page.
It is based on a Javascript code available free to http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm  
that I adapted to integrate it in coppermine.
*****************************************************************************/
// Initialisation
define('IN_COPPERMINE', true);

//For all tests only,uncomment the line "required..." and run the script by http://your-site/slider.php
//require('include/init.inc.php');
//Comment this line to integration in coppermine album
?>

<script type="text/javascript">
/**********************************************************************************************
* Initial javascript code is cutting to 2 parts :
* first part : initialisation
***********************************************************************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
**********************************************************************************************/
//Specify the slider's width (in pixels)
var sliderwidth="1000px"
//Specify the slider's height (by default, height of pic)
var sliderheight="75px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=1
//configure background color: no color is transparent and show the background color of your theme
slidebgcolor=""
//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
</script>

<?php
/******************************************************************************
PHP Code :
*******************************************************************************/
// maximum pics to show
$limit=15;
// request of your database
$query = "SELECT * FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' ORDER BY RAND() LIMIT $limit";
// result of request
$result = cpg_db_query($query);
// For reading result
$rowset = array();
// Index of tab
$i=0;
// max height : will be 75px or 100px
$max_height=0;
// For each pic.....building javascript in php
echo "<script type=\"text/javascript\">"."\n";
while($row = mysql_fetch_array($result)){
// reading pid of pic
$key=$row['pid'];
// reading height of pic
$image_size = compute_img_size($row['pwidth'], $row['pheight'], $CONFIG['thumb_width']);
// Calcul de la hauteur maxi de la zone déroulante (par défaut = 75px)
if ($image_size['height'] > $max_height) {
$max_height = $image_size['height'];
}
// path of pic
$file="albums/".$row['filepath']."thumb_".$row['filename'];
// link of pic
  $lien="<a href=\"displayimage.php?album=random&cat=0&pos=-$key\"><img src=\"".$file."\" border=0></a>";
// building javascript code
echo "leftrightslide[".$i."]='".$lien."'"."\n";
$i=$i+1;
}
//Max height of pics fixed
echo "sliderheight=\"".$max_height."px\""."\n";
echo "</script>"."\n";
// free memory
mysql_free_result($result);
/******************************************************************************
END PHP code
*******************************************************************************/
?>

<script type="text/javascript">
// *****************************************************************
// Part 2 : end of initial javascript code
// *****************************************************************
//Specify gap between each image (use HTML):
var imagegap=" "
//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
window.onload=fillup

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}

if (iedom||document.layers){
with (document){
// Adapt property align (left or right or center) Not in initial code
document.write('<table border="0" cellspacing="0" cellpadding="0" align="center"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>


They are 2 ways for using it :

1) Integration in script 'anycontent.php':

It is the simplest way.
Here the final code of script 'anycontent.php' :

Code Select Expand


if (!defined('IN_COPPERMINE')) die('Not in Coppermine...');

starttable("100%", "Welcome");

include "slider.php";

?>

<tr><td class="tableb" >
</td></tr>
<?php
endtable();

?>


The option must be activated to show the contents of 'anycontent.php' with admin configuration -> Album list view -> content of the main page : i.e : anycontent/minicms/updatehistory/breadcrumb/catlist/alblist/onlinestats

2) Integration in theme.php of your theme

It is the solution which I chose.
I currently use the theme "Rainy Day" and Slider is in the heading of page.
But it is necessary to modify 2 scripts in the folder of the theme:

• Theme.php

Here the code which I inserted right before the tag ?>  (the original code is in script  themes.inc.php, line 1181 and others...)

Code Select Expand


function pageheader($section, $meta = '')
{
global $CONFIG, $THEME_DIR;
global $template_header, $lang_charset, $lang_text_dir;

$custom_header = cpg_get_custom_include($CONFIG['custom_header_path']);

// Define the slider
$bandeau=cpg_get_custom_include("slider.php");

$charset = ($CONFIG['charset'] == 'language file') ? $lang_charset : $CONFIG['charset'];

header('P3P: CP="CAO DSP COR CURa ADMa DEVa OUR IND PHY ONL UNI COM NAV INT DEM PRE"');
header("Content-Type: text/html; charset=$charset");
user_save_profile();

$template_vars = array('{LANG_DIR}' => $lang_text_dir,
'{TITLE}' => $CONFIG['gallery_name'] . ' - ' . strip_tags(bb_decode($section)),
'{CHARSET}' => $charset,
'{META}' => $meta,
'{GAL_NAME}' => $CONFIG['gallery_name'],
// Add slider to global variables
'{BANDEAU}' => $bandeau,
'{GAL_DESCRIPTION}' => $CONFIG['gallery_description'],
'{SYS_MENU}' => theme_main_menu('sys_menu'),
'{SUB_MENU}' => theme_main_menu('sub_menu'),
'{ADMIN_MENU}' => theme_admin_mode_menu(),
'{CUSTOM_HEADER}' => $custom_header,
);

echo template_eval($template_header, $template_vars);
}

The 2 lines specific are annotated.
I use 2 variable named $bandeau and {¦BANDEAU¦}.
But the slider will not appear yet.
It is necessary to add the variable {¦BANDEAU¦} in the template.html of your theme.

• Template.html

Place the variable {BANDEAU}at position desired to show the slider.
Several tests were necessary to find the good place.

Good slider to all

PS ! french original article is posted at http://forum.coppermine-gallery.net/index.php?topic=41073.0

[Pascal YAP]

pbasmo,

very nice in englsh too 
Thanx for your translation.

Like in Fr Forum, here's an exemple with your Slider :
www.haut-les-mains.fr (hands up !)

PYAP

[testomat]

Nice mod.

The mod shows every picture in the db, also protected. How can i modify the sql, that it only shows picture, that is not in a password protected album.

Greets.
Toan

[testomat]

Another request from me, how i have to modify the code, that sizes the picture to the same size.
Like 1024x786 or 786x1024 both to eg. 600x400

[pbasmo]

Hi Testomat,

Sorry for delay.
Yes this version display ALL pictures. But this is a solution to exclude some pictures from "secrets" albums 
You can modify original SQL request in the script slider.php

This is the original code:

Code Select Expand


<?php
/******************************************************************************
Code PHP qui permet de : 
- de lire les images de manière aléatoire dans la base de données
- d'alimenter le tableau leftrightslide initialisé dans le code javascript ci-dessus
- d'adapter la hauteur de la zone sur la hauteur maxi des images lues (75px ou 100px)
*******************************************************************************/
// Nombre maxi d'images à intégrer au scrolling
$limit=15;
// Requête à executer dans la base
$query = "SELECT * FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' ORDER BY RAND() LIMIT $limit";


To exclude some albums, first, you must know the id album and modify the line $query= as (if you want exclude album #15):

Code Select Expand


$query = "SELECT * FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' AND aid <> 15 ORDER BY RAND() LIMIT $limit";


They are other possibilities if you want limit the choice of pictures to some albums (ie albums #15 and #20):

Code Select Expand


$query = "SELECT * FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' AND aid = 15 OR aid = 20 ORDER BY RAND() LIMIT $limit";


or for only 1 album (ie album #15) :

Code Select Expand


$query = "SELECT * FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' AND aid = 15 ORDER BY RAND() LIMIT $limit";



Pierre

[tinorebel]

Hallo pbasmo and all of this forum!
This slide is just simple and usefull.. trying incude it in my site I have a dubit:
where should i put slider.php file.... in the gallery folder?

When trying to test it calling from safari the file slider.php I get an error I dont understand...

Parse error: syntax error, unexpected '"' in /mounted-storage/home31b/sub001/sc204/www/website/gal/slider.php on line 55

can someone give me a clue?

Thanks!

[pbasmo]

Hi tinorebel

The file slider.php must be installed in the same folder of the file anycontent.php, the root of your website.
For error, i don't understand too.
But first, place the file in the good folder and test it.
Have you other problems with Coppermine under Safari ?
Please, can you get me a link to your website ?

Pierre

[rubenix]

hello there!!

Thanks for this hack!! awesome

I just have a problem with this hack as it shows via anycontent but cannot use it via template.html, I implemented the hack in theme.php but for some reason just shows {BANDEAU} in the page, I think its just a minor issue I skipped... Can someone help me out pliz?

I need to place it after the counter as if I place it before the counter doesn't show properly...

here my site: http://www.rubenix.net

[Nibbler]

You need to add the {BANDEAU} tag above/before the {GALLERY} tag.

[rubenix]

Thanks Nibbler! worked like a charm but what I need is place it after the counter I have in the gallery as if I place the Bandeau before the gallery tag or if I use it in the anycontent.php the counter doesn't work properly as doesn't shows the 'visits today' nor the 'online visitors', so maybe I will need to use another scroller....

[Nibbler]

You just need to modify pagefooter instead of pageheader in the above code. Either that or fix the counter. Please replace the 'powered by coppermine' footer on your gallery.

[rubenix]

done switched to 'image scroller (based on iTunes)'

Thanks!

[optigan]

Hi!

Is there a way to modify the sql query in order to display the pics from the current album only?
Then maybe it could replace the filmstrip 

[Gephri]

I too would like this mod to show in the footer area of the page - but when I add the following to function pagefooter  in theme.php - nothing shows:

Code Select Expand

function pagefooter()
{
    //global $HTTP_GET_VARS, $HTTP_POST_VARS, $HTTP_SERVER_VARS;
    global $USER, $USER_DATA, $ALBUM_SET, $CONFIG, $time_start, $query_stats, $queries;;
    global $template_footer;

    $custom_footer = cpg_get_custom_include($CONFIG['custom_footer_path']);

// Define the slider
$bandeau=cpg_get_custom_include("slider.php");

    if ($CONFIG['debug_mode']==1 || ($CONFIG['debug_mode']==2 && GALLERY_ADMIN_MODE)) {
    cpg_debug_output();
    }

    $template_vars = array(
        '{SYS_MENU}' => theme_main_menu('sys_menu'),
        '{SUB_MENU}' => theme_main_menu('sub_menu'),
        '{CUSTOM_FOOTER}' => $custom_footer,
        '{VANITY}' => (defined('THEME_IS_XHTML10_TRANSITIONAL') && $CONFIG['vanity_block']) ? theme_vanity() : '',
// Add slider to global variables
'{BANDEAU}' => $bandeau,
    );

    echo template_eval($template_footer, $template_vars);
}
}  //{THEMES}




[Gephri]

Solution:

Code Select Expand

function pagefooter()
{
    //global $HTTP_GET_VARS, $HTTP_POST_VARS, $HTTP_SERVER_VARS;
    global $USER, $USER_DATA, $ALBUM_SET, $CONFIG, $time_start, $query_stats, $queries;;
    global $template_footer;

    $custom_footer = cpg_get_custom_include($CONFIG['custom_footer_path']);

// Slider: Define the slider
$sliderbar=cpg_get_custom_include("slider.php");

    if ($CONFIG['debug_mode']==1 || ($CONFIG['debug_mode']==2 && GALLERY_ADMIN_MODE)) {
    cpg_debug_output();
    }

    $template_vars = array(
        '{SYS_MENU}' => theme_main_menu('sys_menu'),
        '{SUB_MENU}' => theme_main_menu('sub_menu'),
        '{CUSTOM_FOOTER}' => $custom_footer,
        '{VANITY}' => (defined('THEME_IS_XHTML10_TRANSITIONAL') && $CONFIG['vanity_block']) ? theme_vanity() : '',
// Slider: Add slider to global variables
'{SLIDERBAR}' => $sliderbar,
    );

    echo template_eval($template_footer, $template_vars);
}
}  //{THEMES}


[Gephri]

I would like to use this on the index page and other pages - how can I get it to show up in anycontent and on same index page show below footer?
The images that each draws don't have to be the same

[rascalli]

I have this installed on my site.

BUt instead of the pictures I see the famous white picture with red X.
BUt when I click it , it brings me to the picture

Any idea what I did wrong ?

My pictures are not in the album folder, maybe that is the problem ?

[Nibbler]

Yes. The code hardcodes the name of the albums directory.

Code Select Expand


// path of pic
$file="albums/".$row['filepath']."thumb_".$row['filename'];


It should use the built-in function, like this:

Code Select Expand


// path of pic
$file=get_pic_url($row, 'thumb');


[rascalli]

yep that works perfect.

Thanks a lot .. great mod

[Gephri]

Has anyone figured out how to use this Mod on other php pages outside of the gallery?
Would like to show the images on my bridged phpBB and across to other sites of mine.