Image Crawler Modification

[pacmann]

Script: Text and Image Crawler v1.5
http://www.dynamicdrive.com/dynamici...wler/index.htm

Does anyone know if the script above can be modified relatively easily to make the images "clickable" (either as a link to another page or to an "image viewer")? In the following script: CMotion Image Gallery (http://www.dynamicdrive.com/dynamici...iongallery.htm) the images are clickable, however they do not auto-scroll. I'm looking for a script that has the combination of "both" (if you know of one) -- but perhaps guidance with modifying either of these two existing scripts will suffice. Any input would be greatly appreciated. Thank you!

[jscheuer1]

You can put linked images in the Crawler:

<div class="marquee" id="vacation">
<a href="image_01.jpg"><img src="image_01_tbn.jpg" alt=""></a>
<a href="image_02.jpg"><img src="image_02_tbn.jpg" alt=""></a>
<a href="image_03.jpg"><img src="image_03_tbn.jpg" alt=""></a>
<a href="image_04.jpg"><img src="image_04_tbn.jpg" alt=""></a>
<a href="image_05.jpg"><img src="image_05_tbn.jpg" alt=""></a>
<a href="image_06.jpg"><img src="image_06_tbn.jpg" alt=""></a>
<a href="image_07.jpg"><img src="image_07_tbn.jpg" alt=""></a>
<a href="image_08.jpg"><img src="image_08_tbn.jpg" alt=""></a>
<a href="image_09.jpg"><img src="image_09_tbn.jpg" alt=""></a>
<a href="image_10.jpg"><img src="image_10_tbn.jpg" alt=""></a>
</div>
<script type="text/javascript">
marqueeInit({
 uniqueid: 'vacation',
 style: { //style object for this marquee container (use quotes on both sides of the : as shown)
	'width': '100%',
	'height': '66px',
	'background-color': '#ddd',
	'border': '1px solid #111',
	'margin': '2ex auto 0 auto'},
	inc: 3 //speed - pixel increment for each iteration of this marquee's movement
});
</script>

If you want those links to have onclick functions, you can do that too:

<div class="marquee" id="vacation">
<a href="image_01.jpg" onclick="enlargeimage(this.href); return false;"><img src="image_01_tbn.jpg" alt=""></a>
<a href="image_02.jpg" onclick="enlargeimage(this.href); return false;"><img src="image_02_tbn.jpg" alt=""></a>
<a href="image_03.jpg" onclick="enlargeimage(this.href); return false;"><img src="image_03_tbn.jpg" alt=""></a>
<a href="image_04.jpg" onclick="enlargeimage(this.href); return false;"><img src="image_04_tbn.jpg" alt=""></a>
<a href="image_05.jpg" onclick="enlargeimage(this.href); return false;"><img src="image_05_tbn.jpg" alt=""></a>
<a href="image_06.jpg" onclick="enlargeimage(this.href); return false;"><img src="image_06_tbn.jpg" alt=""></a>
<a href="image_07.jpg" onclick="enlargeimage(this.href); return false;"><img src="image_07_tbn.jpg" alt=""></a>
<a href="image_08.jpg" onclick="enlargeimage(this.href); return false;"><img src="image_08_tbn.jpg" alt=""></a>
<a href="image_09.jpg" onclick="enlargeimage(this.href); return false;"><img src="image_09_tbn.jpg" alt=""></a>
<a href="image_10.jpg" onclick="enlargeimage(this.href); return false;"><img src="image_10_tbn.jpg" alt=""></a>
</div>
<script type="text/javascript">
marqueeInit({
 uniqueid: 'vacation',
 style: { //style object for this marquee container (use quotes on both sides of the : as shown)
	'width': '100%',
	'height': '66px',
	'background-color': '#ddd',
	'border': '1px solid #111',
	'margin': '2ex auto 0 auto'},
	inc: 3 //speed - pixel increment for each iteration of this marquee's movement
});
</script>

Only, since enlargeimage isn't defined in the crawler script, you would have to add it to the page, ex:

<script type="text/javascript">
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)
}
</script>

You would put that in the head of the page.

Or (though depending upon which exact script you choose, this could be a little tricky) you could use another script for the viewer, like Lightbox or one of many of the Lightbox type scripts and viewers available around the web.

[pacmann]

Wow! Thanks so much for the help! You're the best!!!

[pacmann]

When scrolling images I noticed that the style parameters "margin," "padding," and "border" affect the area around the entire "marquee" (top, bottom, sides). I also noticed that when the parameter "noAddedSpace" is set to "true", the last photo in the sequence "butts-up" against the first photo so that there is no space in between. I am trying to control the amount of space between the photos. How would I change the amount of space to 2px (it appears to default to about 4px)? Any help would be greatly appreciated. Thanks!

[jscheuer1]

Offhand I would say use noAddedSpace: true. Then instead of using margin or padding in the style section of the marqueeInit, use it in css style. Each crawler is assigned a class name by the script. If you only have one or it's the first one on the page, that's marquee0. If there's more than one, the next is marquee1, then marquee2 and so on for however many you have.

Let's say you have only one marquee and you want the images to each be spaced at 2px like you say. Lay them out with no spaces or line breaks between them:

<div class="marquee" id="vacation"><a href="image_01.jpg"><img src="image_01_tbn.jpg" alt=""></a><a href="image_02.jpg"><img src="image_02_tbn.jpg" alt=""></a><a href="image_03.jpg"><img src="image_03_tbn.jpg" alt=""></a><a href="image_04.jpg"><img src="image_04_tbn.jpg" alt=""></a><a href="image_05.jpg"><img src="image_05_tbn.jpg" alt=""></a><a href="image_06.jpg"><img src="image_06_tbn.jpg" alt=""></a><a href="image_07.jpg"><img src="image_07_tbn.jpg" alt=""></a><a href="image_08.jpg"><img src="image_08_tbn.jpg" alt=""></a><a href="image_09.jpg"><img src="image_09_tbn.jpg" alt=""></a><a href="image_10.jpg"><img src="image_10_tbn.jpg" alt=""></a></div>

Use noAddedSpace: true, and in a stylesheet for the page add this rule:

.marquee0 img {
	margin: 0 1px;
}

That will put a 1px left and right margin around each image, which will add up to a 2px space between each one as they scroll past.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[pacmann]

You're a FREAKIN' genius! Thanks!!!

[Stefano82]

Offhand I would say use noAddedSpace: true. Then instead of using margin or padding in the style section of the marqueeInit, use it in css style. Each crawler is assigned a class name by the script. If you only have one or it's the first one on the page, that's marquee0. If there's more than one, the next is marquee1, then marquee2 and so on for however many you have.

Let's say you have only one marquee and you want the images to each be spaced at 2px like you say. Lay them out with no spaces or line breaks between them:

<div class="marquee" id="vacation"><a href="image_01.jpg"><img src="image_01_tbn.jpg" alt=""></a><a href="image_02.jpg"><img src="image_02_tbn.jpg" alt=""></a><a href="image_03.jpg"><img src="image_03_tbn.jpg" alt=""></a><a href="image_04.jpg"><img src="image_04_tbn.jpg" alt=""></a><a href="image_05.jpg"><img src="image_05_tbn.jpg" alt=""></a><a href="image_06.jpg"><img src="image_06_tbn.jpg" alt=""></a><a href="image_07.jpg"><img src="image_07_tbn.jpg" alt=""></a><a href="image_08.jpg"><img src="image_08_tbn.jpg" alt=""></a><a href="image_09.jpg"><img src="image_09_tbn.jpg" alt=""></a><a href="image_10.jpg"><img src="image_10_tbn.jpg" alt=""></a></div>

Use noAddedSpace: true, and in a stylesheet for the page add this rule:

.marquee0 img {
	margin: 0 1px;
}

That will put a 1px left and right margin around each image, which will add up to a 2px space between each one as they scroll past.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Hi everybody.
I started to use images crawler module for a joomla website.
I would like to do a simple change that i did on a several others modules, but i'm not able to do it on images crawler.

I only would like to apply a margin, border and dropshadow.
I'm looking for a css sheet but i find only a php file on that module.
What can i do?
Thank's a lot.

[jscheuer1]

There is no external stylesheet for this script. And I'm not familiar with any modules adapted from it. But chances are it operates mostly like the basic script in most things. For styling the crawler itself, Find the marqueeInit (javascript code) and add or edit it's style property as outlined on the script's demo page. Example:

marqueeInit({
	uniqueid: 'mycrawler',
	style: {
		'padding': '5px',
		'width': '450px',
		'background': 'lightyellow',
		'border': '1px solid #CC3300'
	},
	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,
	persist: true,
	savedirection: true
});

Please note that unlike pure css style, both the property and its value must be quoted. See also:

http://www.dynamicdrive.com/dynamici...wler/index.htm

If you attempt to use css style directly to modify the crawler, it might work. But chances are it will not work and/or will cause poor performance of the script.

As for styling images inside the crawler. Each crawler on a page is given a class. The first is "marquee0" the second "marquee1" and so on. If there is only one crawler on the page, it's "marquee0". So you may style its images using an existing stylesheet for the page. If the page has no stylesheet, make one. Either way, this heading (highlighted with its closing bracket) will allow you to apply styles to the images in the crawler (for example for the first or only crawler on a page):

.marquee0 img {
	border: 2px solid black;
}

I've included an optional example rule (green). You can add any styles you want there. Using styles that add to the dimensions of the images, might be problematic unless you also add the same styles to the unique id selector for that crawler. So if you want to add border like that in my example, and the unique id for this crawler is "mycrawler" You would want o use that as well:

.marquee0 img, #mycrawler img {
	border: 2px solid black;
}

This is so that the script can more accurately measure the dimensions of the raw image train.