crawler.js or conveyor

**asiatic** · 01-18-2010, 11:35 AM

1) Script Title: Crawler.js or conveyor belt

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...wler/index.htm

3) Describe problem: i have used your script which is what i have wanted on this site : http://www.stampsworldindia.com/2010stamps.htm
but how do i add a two line text to each image?

Also i have put a hyperlink but is it better if i use a java script thumbnail script: http://www.stampsworldindia.com/java.html
how do i integrate it with the crawler.js script.

Adding text & clicking on thumbnail for a larger pic along with a slideshow is a must. Which of the two scripts would be better for my site? Both are very good scripts but i want to use only one which is compatable. Request you for guidance. thank you

**jscheuer1** · 01-18-2010, 02:50 PM

This will work:

Code:

<div class="marquee" id="mycrawler2">
<table>
<tr>
<td><a target="_blank" href="http://www.stampsworldindia.com/images/rbilarge.jpg" onclick="open(this.href,this.target,'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=595,height=430');return false;"><img src="images/rbi.jpg" alt="Reserve Bank" title="RBI" border="0"><br>Hello</a></td><td><a href="http://www.stampsworldindia.com/images/conferancelarge.jpg" target="_blank" onclick="open(this.href,this.target,'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=595,height=430');return false;"><img src="images/conference.jpg" alt="Muskoka" title="Conference" border="0"><br>Hello</a></td><td><a href="http://www.stampsworldindia.com/images/2053.jpg" target="_blank" onclick="open(this.href,this.target,'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=595,height=430');return false;"><img src="images/2053_small.jpg" alt="hall" title="hall" border="0"><br>Hello</a></td>
</tr>
</table>
</div>
<script type="text/javascript">
marqueeInit({
	uniqueid: 'mycrawler2',
	style: {
		'padding': '2px',
		'width': '90%',
		'height': '90px'
	},
	inc: 5, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 2,
	neutral: 150,
	savedirection: true
});
</script>

Add this to the stylesheet:

Code:

.marquee0 td {
	text-align: center;
}

**asiatic** · 01-19-2010, 04:31 AM

thank you very much sir, you indeed are a genius!
is it possible that when i click on the pic & when i get a larger pic the description also shows?
not to worry though, this much you did was more than enough!

**jscheuer1** · 01-19-2010, 05:30 AM

You can do something like so:

Code:

<div class="marquee" id="mycrawler2">
<table>
<tr>
<td><a target="_blank" href="http://www.stampsworldindia.com/images/rbilarge.jpg" onclick="return myOpen(this);" title="RBI"><img src="images/rbi.jpg" alt="Reserve Bank" title="Reserve Bank" border="0"><br>Hello</a></td><td><a href="http://www.stampsworldindia.com/images/conferancelarge.jpg" target="_blank" onclick="return myOpen(this);" title="Conference"><img src="images/conference.jpg" alt="Muskoka" title="Muskoka" border="0"><br>Hello</a></td><td><a href="http://www.stampsworldindia.com/images/2053.jpg" target="_blank" onclick="return myOpen(this);" title="hall"><img src="images/2053_small.jpg" alt="hall" title="hall" border="0"><br>Hello</a></td>
</tr>
</table>
</div>
<script type="text/javascript">
function myOpen(pic){
	var win = open('', pic.target,'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=595,height=430');
	win.document.open();
	win.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">');
	win.document.write('<center><img src="' + pic.href + '" alt="" style="max-width: 100%; max-height: 390px;"><div>' + pic.title + '<\/div><\/center>');
	win.document.close();
	win.document.title = pic.title;
	return false;
}
marqueeInit({
	uniqueid: 'mycrawler2',
	style: {
		'padding': '2px',
		'width': '90%',
		'height': '90px'
	},
	inc: 5, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 2,
	neutral: 150,
	savedirection: true
});
</script>

But at that rate, you might want to begin to consider a modal display like Lightbox 2.04a:

http://www.dynamicdrive.com/forums/s...470#post163470

**asiatic** · 01-19-2010, 08:01 AM

once again a BIG thank you! i wonder where would be amateurs like me be if there were no seasoned proffessionals like you - you made it so simple!

now that you got me going - like oliver twist " can i ask for more"? i have tried the lightbox script - but how do i integrate this rolling slide show into it?
PLEASE

**jscheuer1** · 01-19-2010, 02:01 PM

I didn't mean to put the rolling slide show into a lightbox. A different script would be needed for that. I meant to use the lightbox instead of the pop up window. You would have to resize your larger images though, so that they are all around the same size and would fit on the average page. Other than that, the two scripts are compatible. Just install the lightbox scripts and styles as instructed and instead of:

Code:

onclick="return myOpen(this);"

use:

Code:

rel="lightbox[stamps]"

**asiatic** · 01-20-2010, 07:05 AM

ok i got that. thank you for your explanation.

**asiatic** · 01-23-2010, 11:18 AM

Request for some additional help, please

http://www.stampsworldindia.com/ddcr...ddcralwer.html

After having uploaded the crawler script i find that i still have two problems, request you to help me:
How do i increase the size of the pop up box for some more description which comes after the image.
How do i color/change font/and make it 3 lines like below:

Issue Date: 5th jan
Face Value: Rs 5
No of Stamps in Sheet: 35

**jscheuer1** · 01-23-2010, 04:54 PM

The titles for the links inside the crawler division have changed slightly, using the   token as a delimiter as to where the line breaks should come on the pop up. For future reference, the height of the window is controlled here (see end of line):

Code:

var win = open('', pic.target,'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars,resizable=0,width=595,height=480');

Also for future reference, inside the myOpen function, we are creating a page on the fly. It's source code is written by the win.document.write() statements.

Here's a demo of everything working together to do what I think you are asking:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>:: STAMPS WORLD INDIA ::The first indian internet stamps web site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.marquee0 td{
	text-align: center;
}
-->
</style>
<html>
<head>
<script type="text/javascript" src="crawler.js">
/*
Text and/or Image Crawler Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
This Notice Must Remain for Legal Use
*/
</script>
</head>
<body>
<div class="marquee" id="mycrawler2">
<table>
<tr>
<td><a target="_blank" href="http://www.stampsworldindia.com/images/rbilarge.jpg" onclick="return myOpen(this);" title="Issue Date: 5th jan&nbsp;Face Value: Rs 5&nbsp;No of Stamps in Sheet: 35"><img src="images/rbi.jpg" alt="Reserve Bank" title="Reserve Bank" border="0"><br></a>
<a href="http://www.stampsworldindia.com/images/rbilarge.jpg">5th Jan</a></td><td><a href="http://www.stampsworldindia.com/images/conferancelarge.jpg" target="_blank" onclick="return myOpen(this);" title="Issue Date: 10th jan&nbsp;Face Value: Rs 5&nbsp;No of Stamps in Sheet: 35"><img src="images/conference.jpg" alt="Muskoka" title="Muskoka" border="0"><br></a>
<a href="http://www.stampsworldindia.com/images/conferancelarge.jpg">10th Jan</a></td><td><a href="http://www.stampsworldindia.com/images/2053.jpg" target="_blank" onclick="return myOpen(this);" title="Issue Date: 15th jan&nbsp;Face Value: Rs 5&nbsp;No of Stamps in Sheet: 35"><img src="images/2053_small.jpg" alt="hall" title="hall" border="0"><br></a>
<a href="http://www.stampsworldindia.com/images/2053.jpg">15th Jan</a></td>
<td></tr>
</table>
</div>
<script type="text/javascript">
function myOpen(pic){
	var win = open('', pic.target,'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars,resizable=0,width=595,height=480');
	win.document.open();
	win.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">');
	win.document.write('<title>' + pic.getElementsByTagName('img')[0].title + '<\/title>');
	win.document.write('<style type="text/css">html, body {margin-bottom: 0; overflow: auto; color: black; background-color: white;}<\/style>');
	win.document.write('<!--[if lt IE 7]><style type="text/css">img {width: 100%; height: expression(Math.min(this.offsetHeight, 390) + "px");}<\/style><![endif]-->');
	win.document.write('<center><img src="' + pic.href + '" alt="" style="max-width: 100%; max-height: 390px;"><\/center>');
	pic = pic.title.replace(/(&nbsp;)|(\xa0)/g, '::').split('::');
	win.document.write('<div style="margin:0.5em 0 0 217px;">' + pic[0] + '<div style="color: red;">' + pic[1] + '<\/div><div style="color: blue;">' + pic[2] + '<\/div><\/div>');
	win.document.close();
	return false;
}
marqueeInit({
	uniqueid: 'mycrawler2',
	style: {
		'padding': '2px',
		'width': '90%',
		'height': '90px'
	},
	inc: 5, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 2,
	neutral: 150,
	savedirection: true
});
</script>
</body>
</html>

**asiatic** · 01-24-2010, 03:39 AM

God ! once again a big thank you!. you indeed are a miracle man! is there anything you dont know?
dynamic drive is indeed a blessing for non learners like me, thank you DD for giving us such a platform.

Thread: crawler.js or conveyor

Thread Tools

Search Thread

crawler.js or conveyor

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions