Thread Rating:

Jumper · 03-02-2012 01:26 AM

Hi,

with this modification you can embed a picture gallery incl. javascript looks like a slider-effect. so you can display as many pictures as you want in only one line Smile

example from a testboard: http://oxygen-vlight.com/intelligen/index.php

this mod is for all users which are using leefish´s XThreads Attachments Gallery

1. download gallery plugin from leefish´s homepage: http://www.leefish.nl/mybb/thread-1294.html
2. install and open the template (global templates) "fishhatt_gallery"
3. replace the original template with this template:

Code:

<style type="text/css">

<!--
/* Gallery Styles */

#motioncontainer {

/*margin:0 auto;  Uncomment this line if you wish to center the gallery on page */

height: 170px; /* Set to gallery height */

}

#motioncontainer a img {

border: 3px solid #cccccc; /* Set image border color */

}

#motioncontainer a:hover img {

border: 3px solid navy; /* Set image border hover color */

}

#statusdiv {

background-color: lightgreen;

border: 1px solid gray;

padding: 2px;

position: absolute; /* Stop Editing Gallery Styles */

left: -300px;

visibility: hidden;

}

#motioncontainer a:hover {

color: red; /* Dummy definition to overcome IE bug */

}

/* End Gallery Styles */

-->

</style>

<!-- Do not edit IE conditional style below -->

<!--[if gte IE 5.5]>

<style type="text/css">

#motioncontainer {

width:expression(Math.min(this.offsetWidth, maxwidth)+'px');

}

</style>

<![endif]-->

<!-- End Conditional Style -->

<script type="text/javascript">

 //1) Set width of the "neutral" area in the center of the gallery.

var restarea=10;

 //2) Set top scroll speed in pixels. Script auto creates a range from 0 to top speed.

var maxspeed=15;

 //3) Set to maximum width for gallery - must be less than the actual length of the image train.

var maxwidth=10000

 //4) Set to 1 for left start, 0 for right, 2 for center.

var startpos=0;

 //5) Set message to show at end of gallery. Enter "" to disable message.

var endofgallerymsg='<<< new entries - move mouse - old entries >>>';



function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.

var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width

var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to  default height

var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"

window.open(path,"", winattributes)

}

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById, scrollspeed=0, movestate='', actualwidth='', cross_scroll, ns_scroll, statusdiv, loadedyes=0, lefttime, righttime;

function ietruebody(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;

}

function creatediv(){

statusdiv=document.createElement("div")

statusdiv.setAttribute("id","statusdiv")

document.body.appendChild(statusdiv)

statusdiv=document.getElementById("statusdiv")

statusdiv.innerHTML=endofgallerymsg

}

function positiondiv(){

var mainobjoffset=getposOffset(crossmain, "left"),

menuheight=parseInt(crossmain.offsetHeight),

mainobjoffsetH=getposOffset(crossmain, "top");

statusdiv.style.left=mainobjoffset+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px";

statusdiv.style.top=menuheight+mainobjoffsetH+"px";

}

function showhidediv(what){

if (endofgallerymsg!="") {

positiondiv();

statusdiv.style.visibility=what;

}

}

function getposOffset(what, offsettype){

var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;

var parentEl=what.offsetParent;

while (parentEl!=null){

totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

parentEl=parentEl.offsetParent;

}

return totaloffset;

}

function moveleft(){

if (loadedyes){

movestate="left";

if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){

cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px";

showhidediv("hidden");

}

else

showhidediv("visible");

}

lefttime=setTimeout("moveleft()",10);

}

function moveright(){

if (loadedyes){

movestate="right";

if (iedom&&parseInt(cross_scroll.style.left)<0){

cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px";

showhidediv("hidden");

}

else

showhidediv("visible");

}

righttime=setTimeout("moveright()",10);

}

function motionengine(e){

var mainobjoffset=getposOffset(crossmain, "left"),

dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft,

dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop,

curposy=window.event? event.clientX : e.clientX? e.clientX: "";

curposy-=mainobjoffset-dsocx;

var leftbound=(menuwidth-restarea)/2;

var rightbound=(menuwidth+restarea)/2;

if (curposy>rightbound){

scrollspeed=(curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed;

clearTimeout(righttime);

if (movestate!="left") moveleft();

}

else if (curposy<leftbound){

scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed;

clearTimeout(lefttime);

if (movestate!="right") moveright();

}

else

scrollspeed=0;

}

function contains_ns6(a, b) {

if (b!==null)

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}

function stopmotion(e){

if (!window.opera||(window.opera&&e.relatedTarget!==null))

if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){

clearTimeout(lefttime);

clearTimeout(righttime);

movestate="";

}

}

function fillup(){

if (iedom){

crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer;

if(typeof crossmain.style.maxWidth!=='undefined')

crossmain.style.maxWidth=maxwidth+'px';

menuwidth=crossmain.offsetWidth;

cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery;

actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;

if (startpos)

cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';

crossmain.onmousemove=function(e){

motionengine(e);

}

crossmain.onmouseout=function(e){

stopmotion(e);

showhidediv("hidden");

}

}

loadedyes=1

if (endofgallerymsg!=""){

creatediv();

positiondiv();

}

if (document.body.filters)

onresize()

}

window.onload=fillup;

onresize=function(){

if (typeof motioncontainer!=='undefined'&&motioncontainer.filters){

motioncontainer.style.width="0";

motioncontainer.style.width="";

motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, maxwidth)+'px';

}

menuwidth=crossmain.offsetWidth;

cross_scroll.style.left=startpos? (menuwidth-actualwidth)/startpos+'px' : 0;

}

</script>

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
	<tbody>
		<tr>
			<td class="thead">
				<div class="expcolimage">
					<img src="{$theme['imgdir']}/collapse{$collapsedimg['fishhattatgal']}.gif" id="fishhattatgal_img" class="expander" alt="[-]" title="" />
				</div>
				<div><strong>Kleine Auswahl der neuesten Einträge</strong></div>
			</td>
		</tr>
	</tbody>
	<tbody style="{$collapsed['fishhattatgal_e']}" id="fishhattatgal_e">
		<tr>
			<td class="trow1" align="">
<div id="motioncontainer" style="position:relative;overflow:hidden;">

<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
		<nobr id="trueContainer">		{$fishhatt_gallery_gallery}</div></div>
			</td>
		</tr>
	</tbody>
</table>
<br />

you can customize many settings in this code. each point is explained in code.

and how many pictures you want to display can you change in the plugin settings (Number Of Attachments Thumbnails). so you can display 10 or 50 or 100 pictures or whatever you want in only one line. i hope this mod is useful for some user. Wink

and big thx to leefish for his very good plugin Yes

Threaded Mode \| Linear Mode Standard Tools
Forum Jump: View a Printable Version Send this Thread to a Friend Subscribe to this thread