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

leefish · 03-02-2012 03:17 AM

Welllll, I am not so sure I should be taking the credit for the plugin - I used a lot of code from RateU to make it. But that modification looks neat.

Will it work on a none fixed layout? I see you have a fixed width container.

***ZiNgA BuRgA*** · 03-02-2012 10:25 AM

Looks pretty cool - thanks for sharing Smile

Jumper · 03-02-2012 11:53 AM

(03-02-2012 03:17 AM)leefish Wrote: Will it work on a none fixed layout? I see you have a fixed width container.

i think you mean this: //3) Set to maximum width for gallery - must be less than the actual length of the image train. var maxwidth=10000

this is the container-width from the area you want to see. if you set "200" you see only 1-2 pictures. better to set a high value. but it can be that you want only a 500px scrollable picture gallery. in this case just change the value.

(03-02-2012 10:25 AM)ZiNgA BuRgA Wrote: Looks pretty cool - thanks for sharing

thx ZiNgA BuRgA Wink

leefish · 03-02-2012 01:44 PM

Hi Jumper - sorry, no I meant that the website was fixed width - but that is not a problem? I have leefish as a fluid layout, so I would want my gallery to be fluid too. Very cool then, I shall try it. Right now I have a JQuery image slider plugin running on LeeFish, but I like this modification a lot.

Jumper · 03-03-2012 01:24 AM

(03-02-2012 01:44 PM)leefish Wrote: I have leefish as a fluid layout, so I would want my gallery to be fluid too.

yes, it works with a fluid layout too Smile

***RateU*** · 03-03-2012 06:39 AM

Thanks for sharing, Jumper Smile

I've added it to our XThreads Example Applications list (under the Image category).
I hope you don't mind.

(03-02-2012 03:17 AM)leefish Wrote: I used a lot of code from RateU to make it.

Nope. I only use the code from Yumi/ZiNgA:

(06-06-2010 11:27 AM)RateU Wrote: If Yumi didn't provide us this code, maybe we never know how to pull the XThreads thumbnails
(06-05-2010 10:20 AM)ZiNgA BuRgA Wrote:
PHP Code:
	$mnlag_att_thumb = xthreads_get_xta_url($mnlag).'/thumb160x120';

Hamster24 · 10-13-2014 03:47 AM

I tried using the leefish attachement gallery but nothings get printed on the screen which is in the fish gallery template can someone help please??

Hamster24 · 10-14-2014 03:02 AM

Anyone can help on the gallery plugin please

Hamster24 · 10-16-2014 04:26 PM

why doesn't the leefish plugin working forgot about the javascript mod only the basic will do

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