forum.coppermine-gallery.net
No Support => Modifications/Add-Ons/Hacks => Mods: Visuals => Topic started by: pbasmo on February 12, 2007, 05:06:18 pm
-
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:
<?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' :
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:
Here the code which I inserted right before the tag ?> (the original code is in script themes.inc.php, line 1181 and others...)
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.
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
-
pbasmo,
very nice in englsh too ;D
Thanx for your translation.
Like in Fr Forum, here's an exemple with your Slider :
www.haut-les-mains.fr (hands up !)
PYAP
-
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
-
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
-
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:
<?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):
$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):
$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) :
$query = "SELECT * FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' AND aid = 15 ORDER BY RAND() LIMIT $limit";
Pierre
-
Hallo pbasmo and all of this forum! :D
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!
-
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
-
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 (http://www.rubenix.net)
-
You need to add the {BANDEAU} tag above/before the {GALLERY} tag.
-
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....
-
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.
-
done switched to 'image scroller (based on iTunes)'
Thanks!
-
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 :P
-
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:
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}
-
Solution:
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}
-
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
-
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 ?
-
Yes. The code hardcodes the name of the albums directory.
// path of pic
$file="albums/".$row['filepath']."thumb_".$row['filename'];
It should use the built-in function, like this:
// path of pic
$file=get_pic_url($row, 'thumb');
-
yep that works perfect.
Thanks a lot .. great mod
-
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.
-
Stick it in an iframe.
-
Clever...
must need something more than the following because no images show:
<iframe src="http://www.[mysite].com/gallery/slider.php" frameborder="0" scrolling="no"></iframe>
-
Post a link to the page that contains that iframe...
-
http://www.superstarvolleyball.com/welcome/home2.php (http://www.superstarvolleyball.com/welcome/home2.php)
-
When I follow the link of the iframe, I also can't see a thing, problem must be there!
-
Yep, http://www.superstarstudents.com/gallery/slider.php doesn't display anything, no matter if it's embedded into an iframe or viewed in a browser window of it's own. Fix that first. Then start playing with the iframe solution.
Joachim
[ot]
P.S. Looking at the HTML output of your page one can see this:<!-- Browser Detective - Protected Source Code -->
<!-- Your IP Address Is Being Logged! -->
, followed by a few linebreaks, before the actual output starts. Pretty lame effort if you ask me... ;) Who are you trying to fool with that crap? Regular users won't look at the HTML output, and power-users will not shy away from that message. You're over-doing on your page imo, both in terms of visuals (just a matter of taste though) as well as code gimmicks - 442 lines of output between <head> and </head> is a bit much, don't you agree? The JavaScript should definitely be put into separate files instead of cluttering each page in terms of improving your site's performance (buzzword "caching"!). The validator (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.superstarvolleyball.com%2Fwelcome%2Fhome2.php) nearly chokes because of all this.
[/ot]
-
I've got the mod working in the gallery with both "anycontent" and the template.
http://www.superstarstudents.com/gallery/index.php (http://www.superstarstudents.com/gallery/index.php)
http://www.superstarstudents.com/gallery/index.php?cat=19#auto_shift (http://www.superstarstudents.com/gallery/index.php?cat=19#auto_shift)
The iframe code follows:
<iframe src="http://www.superstarstudents.com/gallery/slider.php" width="700" height="100" frameborder="0" scrolling="no"></iframe>
Should I be pulling in anything else besides "slider.php"?
-
Haha, I love your source code, you even got plain php code above you doctype declaration :D
I see you got it to work now.
-
thanks for the help guys - and the feedback
-
Does anyone else have a problem with the scroller cutting off when getting back around to the first photo in IE7.
-
Stick it in an iframe.
Dear Sir,
I tried to put it into an iframe (because I would like to use it on another site), without any success. It dies, because "Not in Coppermine..." (http://pene.hu (http://pene.hu) - you can see)
But it works perfectly in my Gallery's footer... (galeria[d0t]pene[d0t]hu)
p.s.: Thanks for the CPG, I love it, and a big huge goes to this scripts editor as well!
-
Bit early post, problem has just been solved.
-
I am running variations of the slider.php script so as to pull from different album combinations.
Can anyone explain what changes would need to be made to get these files to work when they are placed in their own folder (one level down)?
-
Two requests, that could also help others:
1) I have categories with several albums. I would like the slider to pull in images from all albums within a single category. How can I set it up so the slider pulls from just one category by manually coding the category idea (rather than coding every album in the category).
2) What would need to be changed to move gallery/slider.php into gallery/slider/slider.php I'd like to do this because I want to place all my variations of slider.php into a single folder
Thanks a bunch and if there's anything I can do to help out - please let me know.
-
I've ported pbasmo's beatiful mod to a plugin.
http://forum.coppermine-gallery.net/index.php/topic,51324.0.html
Have fun ;)
Timo
-
the same problem
in gallery - ok (http://www.etennis.mobitek.biz/cpg1416/index.php)
elsewhere - no
why?
i cant see http://www.etennis.mobitek.biz/cpg1416/slider.php
<iframe src="http://www.etennis.mobitek.biz/cpg1416/slider.php" width="700" height="100" frameborder="0" scrolling="no"></iframe>
-
and how to show images with the same size?
-
I've been trying to add an image/link below the sliding images in this mod - but can only get it to show if placed before the the images... of course I'd like it after (on the bottom). Any ideas how?
my code in slider.php
if (iedom||document.layers){
with (document){
// Adapt property align (left or right or center) Not in initial code
document.write('<table align="center" width="100%" cellspacing="0" cellpadding="0"><tr><td valign="bottom" align="center"><span style="font-family:verdana,arial,sans-serif; font-size:10px; color:#999999;">See someone you know ? <img src="/images/icons/lkr.gif" width="20" height="20" border="0" alt="lkr.gif" title="" align="texttop"> Click the pic to go to it !</span></td></tr><tr><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></tr></table>')
}
-
it woks great but you have to do some modifications if you are going to use it on a diferent site
here is my site as an example http://paisapimp.com (http://paisapimp.com)
So for the I frame I used this code
<iframe name="Slider" src="http://paisapimp.com/galeria/slider.php" scrolling="no" align="texttop" border="0" frameborder="0" width="800" height="125"></iframe>
Also if you are going to have it on a iframe you must make you links to show on the entire page not only on your I frame so here is how I set my code on line 76 , also on this line I made a little ajustment so all my pictures will show on a same size 140 x 105
$lien="<a target=\"_top\" href=\"displayimage.php?album=random&cat=0&pos=-$key\"><img width=\"140\" height=\"105\" src=\"".$file."\" border=0></a>";
Just in case some needs it here is my slider.php file
<style type="text/css">
<!--
body {
background-color: #262626;
}
-->
</style><?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=30;
// 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 target=\"_top\" href=\"displayimage.php?album=random&cat=0&pos=-$key\"><img width=\"140\" height=\"105\" 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>
-
Hi
Since I have landscape (150 px x 100px) thumbs and portrait (100px x 150px), is there a way just to show the landscape thumbs in the slide ?
Thanx in advance
-
Hi
Another question, how can I include all pictures from all albums ?
Thanx yet again
-
Use the code from the very first post of this topic. ;)
-
I managed to get the size right. This slider realy slows down the website ? Or is it just me ?
-
Does this work well in all size galleries? Because I read the "Random files" feature doesn't fit well in big galleries & my gallery has 17,000+ pics in it so far.
I'm considering using this Mod but I don't want it to lag anyone's computer
-
Hi
I have a problem with this slider now.
It show with firefox, but not internet explorer !!
Strange though, is when I run the test in internet explorer and firefox, it works, but in my theme it works only with firefox.
Live: http://www.youth-sport-fotos.com/2008/index.php
Test:http://www.youth-sport-fotos.com/2008/slider2.php
Any suggestions ???
-
Upgrade! Your version: cpg1.4.10. Most recent stable release: cpg1.4.19. You're running 9 versions behind. This is not a question of personal taste! Upgrading is mandatory in terms of security as well as functionality.
-
Excuse,
I have not understood - as I can make all images of IDENTICAL height. That is to use crop for "portrait" images?
(I not php the programmer))))
Thanks for a prompt reply)))
-
If I change the maximal height of the image
All images "are cut off" on the bottom edge and unequal height.
??? ??? ???
-
Are you actually looking for support of the slider mod? I doubt it: if all your thumbnails are meant to have the same height, you specify the corresponding option in coppermine's config. Slider just uses the images that already exist - it doesn't create fresh ones.
-
Yes, I understand, that existing images are used.
But it is possible to make certain "container" for slider that the visible (!) height of images was identical.
In the existing version "alignment" of pictures goes on the top edge. And cutting the bottom edge which is already(!) leveled.
I not the programmer))) Excuse, if it was not absolutely clearly expressed)))
-
Any possibility of getting your fantastic mod to work with Timos-Welt's "EnlargeIt!"? see: http://forum.coppermine-gallery.net/index.php/topic,53290.0.html (http://forum.coppermine-gallery.net/index.php/topic,53290.0.html)
Thanks for your time!
- Jake
-
I use the code in the first without any change thanks for this mod very nice
only one thing : the size of the index page is not any more good ... too big and I must scroll
any idea?
sorry for my bad english
-
The mod works great with pictures, however my gallery also includes AVI, MP4 and MOV video files. These files have no thumbnail associated with them as individual files -- they each share the file type's generic thumb. This results in a "RED X" scrolling across the screen.
So, my questions are: is it possible to exclude certain filetypes? Or is it possible to include only one file type (JPEG)?
Thanks!
-
Yes, I understand, that existing images are used.
But it is possible to make certain "container" for slider that the visible (!) height of images was identical.
In the existing version "alignment" of pictures goes on the top edge. And cutting the bottom edge which is already(!) leveled.
I not the programmer))) Excuse, if it was not absolutely clearly expressed)))
Well, I also wanted all the shots to be the same height. Here are my changes in the slider.php file.
First, after
if ($image_size['height'] > $max_height) {
$max_height = $image_size['height'];
}I added
//pick thumb unless smaller than $max_height, if so pick normal
$prefix = "thumb_";
if ($image_size['height'] < $max_height) {
//check if normal exists, if not pick original file
$file="albums/".$row['filepath']."normal_".$row['filename'];
if (file_exists($file)) {
$prefix = "normal_";
} else {
$prefix = "";
}
}
This will pick the thumb, unless the thumb is smaller than $max_height. In that case it will pick the normal_ photo unless it doesn't exist, in that case it will pull the original file.
Later, I changed
// path of pic
$file="albums/".$row['filepath']."thumb_".$row['filename']; to
// path of pic
$file="albums/".$row['filepath'].$prefix.$row['filename']; so that the correct picture is pulled and
// link of pic
$lien="<a href=\"displayimage.php?album=random&cat=0&pos=-$key\"><img src=\"".$file."\" border=0></a>"; is replaced with
// link of pic
$lien="<a href=\"displayimage.php?album=random&cat=0&pos=-$key\"><img src=\"".$file."\" border=0 height=".$max_height."></a>";so that all pictures have the same height.
I haven't had much time to test really well, but on a cursury glance it seems to be working. You can see how it looks at http://www.hobert.net/gallery/slider.php (http://www.hobert.net/gallery/slider.php) while I am playing with it. Looks like a really, really fun mod.
Note: as a fun thought experiment, change $max_height from "0" to something larger like "200"...
-
The mod works great with pictures, however my gallery also includes AVI, MP4 and MOV video files. These files have no thumbnail associated with them as individual files -- they each share the file type's generic thumb. This results in a "RED X" scrolling across the screen.
So, my questions are: is it possible to exclude certain filetypes? Or is it possible to include only one file type (JPEG)?
Thanks!
You might can try modifying
// request of your database
$query = "SELECT * FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' ORDER BY RAND() LIMIT $limit"; with
// request of your database
$query = "SELECT * FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' WHERE filename LIKE '%.jpg' ORDER BY RAND() LIMIT $limit"; which is shamelessly stolen from Timos-Welts' excellent flow_link mods.
-
My bad ^^^^^^^^^^^^
That should be
// request of your database
$query = "SELECT * FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' AND filename LIKE '%.jpg' ORDER BY RAND() LIMIT $limit";
Sorry.
-
Thanks for the help -- it works just fine!
-
Hi,
Since I upgraded coppermine to last version, I'm having problems with this plugin. When I click an image, a critical error is showing:
"There was an error while processing a database query"
do I forgot something in installation? Does it works with coppermine version 1.4.25?
-
You already have an open thread about the identical issue (http://forum.coppermine-gallery.net/index.php/topic,58978.0.html) - don't cross-post nor double-post. Stay out of this thread and stick to the other thread you have.
The plugin should work with all versions of cpg1.4.x
-
Sorry Joachim, but I think this is an error where the slider plugin can't to access the database, while the other open is due to javascript.
-
"There was an error while processing a database query"
That's a generic error message. There are thousands of threads that explain what needs to be done if you get that error message. However, as you appear to be a person who doesn't heed advice and prefers not to do as supporters suggest, I'll leave it up to you to figure out what needs to be done. Hint: perform a search (http://forum.coppermine-gallery.net/index.php?action=search). Then: stay out of this thread (as I suggested). Supporters are much less reluctant to help if you heed their advice.
-
is there any way I can exclude pictures that were uploaded via 'userpics' from the slide?
x
-
Little late answering this question, but you can modify the "query" and take out the albums you *don't* want using something like:
$query = "SELECT * FROM {$CONFIG['TABLE_PICTURES']} as p WHERE approved = 'YES' AND filename LIKE '%.jpg' AND aid NOT IN (95, 96, 97, 228, 230, 236, 237) $FORBIDDEN_SET ORDER BY RAND() LIMIT $limit";
Not sure what album/category "userpics" are (as I do not use them), but you can code something similar.
Hope this helps anyone chasing this question.
-
Yes. The code hardcodes the name of the albums directory.
// path of pic
$file="albums/".$row['filepath']."thumb_".$row['filename'];
It should use the built-in function, like this:
// path of pic
$file=get_pic_url($row, 'thumb');
My photos are also outside the albums folder, and I used the info above to correct the display of the thumbnails, but the click-through links still don't work. It looks like it's hardcoded too, but I don't know what to change it to. Can anyone tell me?
Thanks in advance.
-
That's interesting, since the code that throws up the link:
$lien="<a href=\"displayimage.php?pos=-$key\" target=\"_blank\"><img src=\"".$file."\" border=\"0\" height=\"".$max_height."\" alt=\"".$filename." ".$description."K ".$dimensions."\"></a>";...is using the normal CGP gallery URL (displayimage.php). Or, um, should. You should search for the "a href" in your code and see what it looks like.
As far as using get_pic_url, this code pretty much just reads the pictures databases, it's not really digging deeper into the config info or cgp functions (like get_pic_url is). I'm not sure how much rewriting would need to be done.
-
That's interesting, since the code that throws up the link:
$lien="<a href=\"displayimage.php?pos=-$key\" target=\"_blank\"><img src=\"".$file."\" border=\"0\" height=\"".$max_height."\" alt=\"".$filename." ".$description."K ".$dimensions."\"></a>";...is using the normal CGP gallery URL (displayimage.php). Or, um, should. You should search for the "a href" in your code and see what it looks like.
As far as using get_pic_url, this code pretty much just reads the pictures databases, it's not really digging deeper into the config info or cgp functions (like get_pic_url is). I'm not sure how much rewriting would need to be done.
Um, I have no idea what you just said. I'm using the code from the very first post of this thread (http://forum.coppermine-gallery.net/index.php/topic,41197.msg195339.html#msg195339) and integrated it into my gallery using the anycontent.php method, but since I had originally bulk-uploaded my images, I edited my code per this post (http://forum.coppermine-gallery.net/index.php/topic,41197.msg240870.html#msg240870) in this same thread, which worked perfectly to fix the thumbnails shown in the slider. But no one has mentioned a fix for the click-through link.
I hadn't uploaded too many images yet, so I deleted those and reuploaded through CPG's regular upload interface, but that actually doesn't fix the problem.
I believe this is what needs to be fixed:
// link of pic
$lien="<a href=\"displayimage.php?album=random&cat=0&pos=-$key\"><img src=\"".$file."\" border=0></a>";but I don't know what to change it to.
My gallery is here: http://www.luxuryalaskahome.com/gallery/index.php (http://www.luxuryalaskahome.com/gallery/index.php)
-
Ah, that one's easy....
Since your error in CPG is "album/file does not exist", I'd take out the "album=random&". When I do that manually, I'm taken to the correct page.
Hmm, it may be that "random" as a meta gallery has been removed in a later version since that code has been developed. Tedchnically, you can probably get rid of the "cat=0&" as well and just leave "displayimage.php?pos=-$key", which is how the latest version of CPG links. This should put it in the correct category/album that the hosts the original image.
-
Just to be clear, this is changed code you need to use:
// link of pic
$lien="<a href=\"displayimage.php?pos=-$key\"><img src=\"".$file."\" border=0></a>";
-
Just to be clear, this is changed code you need to use:
// link of pic
$lien="<a href=\"displayimage.php?pos=-$key\"><img src=\"".$file."\" border=0></a>";
Thank you so much for your help, Hobert!