Pixelpost

redhead · #**101** 08-25-2006, 10:01 AM

haha, yeah, it was just like a wonder

great template, i love it!! i did some minor changes to make it fit to my reddish style

http://blog.reddish.at

pingviin · #**102** 08-25-2006, 07:18 PM

How did you fix that archive problem?

Igor · #**103** 10-01-2006, 05:55 PM

Hi all,

This is my first post on this forum.. Wow! What a great tool this is! I have downloaded and experimented with PP for some days now. I have been in lurking mode until now.

Many congrats to dOLicHoCePhaLe for his template, I really love this slick and clean interface and it's a breeze to get it up and running!

But I have subscribed because I have a question to this community (of coz).

It is my intention to use this photo blogging software for picture posts that can contain 10, 20 or more grouped pictures and I will use the 'categories' in PP to group them in a kind of 'albums'. So the restriction of 5 thumbnails per page is a limitation that I would like to try to extend.

I'm experimenting with the code of dynamicdrive's "Conveyor Belt slideshow script" (see below, at the bottom of this post for the links), but I'm an absolute total newbie about php, css, dhtml, javascript! BRRrrrrr!!

I have setup a dedicated PP-album for my posting here, so have a look about my trials here: http://dolichocephale.byethost4.com/

I have chosen for a rude approach and just copy-paste the conveyor belt code into the file of this theme that seemed appropriate. To explain what I did:

File: image_template.html

Code:

<div id="vignettes">
	<IMAGE_THUMBNAIL_ROW>	
</div>

Replace the line <IMAGE_THUMBNAIL_ROW> with the full code block, so the div id "vignettes" becomes like:

Code:


		<div id="vignettes">
			<script type="text/javascript">

/***********************************************
* 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="300px"
//Specify the slider's height
var sliderheight="70px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=1
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="thumbnails/thumb_20061001125346_example1.jpg" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="thumbnails/thumb_20061001125450_example2.jpg" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="thumbnails/thumb_20061001125653_example4.jpg" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="thumbnails/thumb_20061001125756_example4.jpg" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="thumbnails/thumb_20061001125955_example5.jpg" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="thumbnails/thumb_20061001130020_example6.jpg" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="thumbnails/thumb_20061001130045_example7.jpg" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="thumbnails/thumb_20061001130105_example8.jpg" border=1></a>'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=1


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

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)
}
window.onload=fillup

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){
document.write('<table border="0" cellspacing="0" cellpadding="0"><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>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>	
		</div>
	</div>
	<div id="bas">&nbsp;</div>
</div>

This produces the result as can be found in the link above. Of course I have tried many variants in the code, but nothing helped me, so this leaves me with a coupe of questions:

Most important:
1) The scrolling of the thumbnails stops nicely when the mousecursor hovers on the thumb. But the thumbnails contain no link. I would like to be able to click the thump and produce the same effect as clicking one of the five static thumbnails of the original theme.
2) To achieve this result, I had to enter hardcoded, directory- and file names for the thumbs to be displayed. This should become dynamic from the random function, is that possible?

Nice to haves:
a) The scrolling gets interrupted at the end of the line. It would be nicest if the scrolling action continues smoothly in a continuous loop..
b) The thumbnailimages are displayed with small margins. It would be nicest is they would be displayed directly nxt to eachother.

I hope that some people in here can help me to get things 'on track' and I will continue to study and try (trial-and-error), to get to a working conveyor-belt in this theme.

If this is not the right place to post my request, then please let me know and feel free to move to another part of this forum?!

Keep up that good work!

ps:
dynamicdrive
and:
Conveyor Belt slideshow script

Vernon.Trent · #**104** 10-01-2006, 06:06 PM

well,

it looks like issues belonging to dhtml source from dynamic drive (creator/developer of the script)

the thumbnail size is specified in pixelpost (admin/option/thumbnails/
the row is just a feature to have a preview of what is coming next.

to "collect" your pics as albums you can assign them to categories which can have names like you want to call your album and use geos showcategories addon to surf the specified categories.

the margin/border of the thumbnail is specified in the style.css of the dolicho template.

there is no link specified for your thumbnails, that's the reason it's not working when you click on it.... the script does not understand the pixelpost tags.

Igor · #**105** 10-02-2006, 04:03 PM

Dohh!!

Here it becomes pretty clear how newbie I Am.. Apparently, the href="http://" is the part that takes care to make the thumbs of the sliding conveyorbelt click-able. I have changed:

Code:

leftrightslide[0]='<a href="http://"><img src="thumbnails/thumb_20061001125346_example1.jpg" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="thumbnails/thumb_20061001125450_example2.jpg" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="thumbnails/thumb_20061001125653_example4.jpg" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="thumbnails/thumb_20061001125756_example4.jpg" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="thumbnails/thumb_20061001125955_example5.jpg" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="thumbnails/thumb_20061001130020_example6.jpg" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="thumbnails/thumb_20061001130045_example7.jpg" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="thumbnails/thumb_20061001130105_example8.jpg" border=1></a>'

Into:

Code:

leftrightslide[0]='<a href="http://dolichocephale.byethost4.com/index.php?showimage=1"><img src="thumbnails/thumb_20061001125346_example1.jpg" border=1></a>'
leftrightslide[1]='<a href="http://dolichocephale.byethost4.com/index.php?showimage=2"><img src="thumbnails/thumb_20061001125450_example2.jpg" border=1></a>'
leftrightslide[2]='<a href="http://dolichocephale.byethost4.com/index.php?showimage=3"><img src="thumbnails/thumb_20061001125653_example4.jpg" border=1></a>'
leftrightslide[3]='<a href="http://dolichocephale.byethost4.com/index.php?showimage=4"><img src="thumbnails/thumb_20061001125756_example4.jpg" border=1></a>'
leftrightslide[4]='<a href="http://dolichocephale.byethost4.com/index.php?showimage=5"><img src="thumbnails/thumb_20061001125955_example5.jpg" border=1></a>'
leftrightslide[5]='<a href="http://dolichocephale.byethost4.com/index.php?showimage=6"><img src="thumbnails/thumb_20061001130020_example6.jpg" border=1></a>'
leftrightslide[6]='<a href="http://dolichocephale.byethost4.com/index.php?showimage=7"><img src="thumbnails/thumb_20061001130045_example7.jpg" border=1></a>'
leftrightslide[7]='<a href="http://dolichocephale.byethost4.com/index.php?showimage=8"><img src="thumbnails/thumb_20061001130105_example8.jpg" border=1></a>'

You can see the results again here: http://dolichocephale.byethost4.com/
(Click on a thumnail and the page will change now, to reflect the picture of it)

This takes care of the clicking action. Of course it still needs a solution to make it variable input, so I now need to find the tables where this information is stored and some scripting to feed the content in as many lines as there are pictures (and thumbnails) for a certain category.

To be continued.... (I hope)

Igor · #**106** 10-02-2006, 10:49 PM

I will just continue..

(Sorry for hijacking this thread)

The declaration of the links and images is a needless repetition.. It seems that javascript should be able to handle that by retrieving data form the database with a script like:

Code:

//Specify the slider's images
var leftrightslide = [$image_array_from_db];
var imagelinks = [$image_link_hrefs_from_db];
var finalslide=''
for(var i = 0;i < leftrightslide.length;i++){
 '<a href="'+imagelinks+'"><img src="'+leftrightslide[i]+'" border=1></a>'
}

(Found this at forum: http://www.webxpertz.net/forums/showthread.php?t=34685)

In the documentation of PixelPost (pixelpost-tags.txt), I find some php tags that seem related;
<IMAGE_NAME> || filename of the photo
<IMAGE_THUMBNAIL> || thumbnail of that image with link to the image
<IMAGE_THUMBNAIL_NO_LINK> || thumbnail of that image without link

I wonder if any of these tags can be used to feed the javascript.

Hmm, it's late now.. maybe next time....

luckyfinger · #**107** 12-01-2006, 07:01 AM

Great Template, but I am having problems with the archive.
No Thumbnails are showing.
I.ve followed all the instructions regarding size and amount of thumbs.
Any suggestions?

dolichocephale · #**108** 12-01-2006, 11:55 AM

Quote:

Originally Posted by luckyfinger

I am having problems with the archive.
No Thumbnails are showing.

It happens usually when the photos don't have category. Can you give your website url ?

luckyfinger · #**109** 12-01-2006, 12:10 PM

That did the trick!
Merci encore, ce template est vraiment magnifique!
(excuse my French)

mikekim · #**110** 12-10-2006, 01:06 AM

Great template. But I'm having a little problem: markdown syntax or HTML are not working in image descriptions.

EDIT: problem solved, sorry.

Pixelpost

Authentic Photoblog Flavour