Slider in Coppermine

Nibbler · January 30, 2008, 12:14:55 AM

Stick it in an iframe.

Gephri · January 30, 2008, 01:22:37 AM

Clever...
must need something more than the following because no images show:

Code Select

<iframe src="http://www.[mysite].com/gallery/slider.php" frameborder="0" scrolling="no"></iframe>

Joachim Müller · January 30, 2008, 10:23:57 AM

Post a link to the page that contains that iframe...

Gephri · January 30, 2008, 06:06:16 PM

http://www.superstarvolleyball.com/welcome/home2.php

SaWey · January 30, 2008, 06:19:32 PM

When I follow the link of the iframe, I also can't see a thing, problem must be there!

Joachim Müller · January 30, 2008, 06:32:08 PM

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:

Quote

, 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 nearly chokes because of all this.
[/ot]

Gephri · January 30, 2008, 06:36:07 PM

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?cat=19#auto_shift

The iframe code follows:

Code Select

<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"?

SaWey · January 30, 2008, 07:01:40 PM

Haha, I love your source code, you even got plain php code above you doctype declaration

I see you got it to work now.

Gephri · January 30, 2008, 09:52:08 PM

thanks for the help guys - and the feedback

swendingo · February 07, 2008, 05:29:39 AM

Does anyone else have a problem with the scroller cutting off when getting back around to the first photo in IE7.

Pene · February 18, 2008, 02:28:52 PM

Quote from: Nibbler on January 30, 2008, 12:14:55 AM
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 - 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!

Pene · February 18, 2008, 02:43:18 PM

Bit early post, problem has just been solved.

Gephri · February 18, 2008, 08:39:30 PM

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)?

Gephri · February 23, 2008, 03:42:14 AM

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.

Timos-Welt · March 22, 2008, 04:05:06 PM

I've ported pbasmo's beatiful mod to a plugin.
http://forum.coppermine-gallery.net/index.php/topic,51324.0.html

Have fun

Timo

joginvik · April 22, 2008, 04:54:30 PM

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>

joginvik · April 22, 2008, 06:02:53 PM

and how to show images with the same size?

Gephri · May 15, 2008, 08:38:42 AM

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

Code Select

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 ?&nbsp;&nbsp;<img src="/images/icons/lkr.gif" width="20" height="20" border="0" alt="lkr.gif" title="" align="texttop">&nbsp;&nbsp;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>')
	}

paisapimp · June 24, 2008, 12:14:01 PM

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

So for the I frame I used this code

Code Select

<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

Code Select

$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

Code Select

<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>

JohannM · August 01, 2008, 02:51:33 PM

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

coppermine-gallery.com/forum

News:

Slider in Coppermine

Nibbler

Gephri

Joachim Müller

Gephri

SaWey

Joachim Müller

Gephri

SaWey

Gephri

swendingo

Pene

Pene

Gephri

Gephri

Timos-Welt

joginvik

joginvik

Gephri

paisapimp

JohannM