Ultimate Fade-in slideshow - Font modification

[ztech123]

1) Script Title: Ultimate Fade-in slideshow

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

3) Describe problem:
Hi folks. First of all, a huge thanks to Dynamic Drive for making that Peekabo script. Can't begin to tell you how much relieved I have been to find it.

I am trying to slightly modify the script. What I am working on is the 2nd right image among the four in the above link. So, a picture appears. A second later 2 rows of text apear on a black background and few seconds later next pic comes and cycle repeats.

Now, the modification I want to do is that among the two lines which appear ... the top row should be in a bigger bold font and the 2nd row should be in a much smaller font.

This is my current script :

script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [988, 433], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["1.jpg", "", "", "Stand Out from the crowd. <br /><br /> Leave your accounting worries to us"],
		["2.jpg", "", "", "Competent advice when you need it. <br /><br /> Receive quick responses about your organization's Financial needs"],
		["3.jpg", "", "", "Tailored to your needs. <br /><br /> We will discuss with you exactly what you need"],
		["4.jpg", "", "", "Service you can rely upon. <br /><br /> Now you can free up time to concentrate on your organization"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 2000, //transition duration (milliseconds)
	descreveal: "peekaboo",
    togglerid: "" 
})


</script>

Any help would be greatly appreciated

[jscheuer1]

As you've already done with <br /> can put other HTML tags in the descriptions, example:

["4.jpg", "", "", "<b style='font-size: 115%;'>Service you can rely upon.</b> <br /><br /> <span style='font-size: 90%;'>Now you can free up time to concentrate on your organization</span>"] //<--no trailing comma after very last image element!

[ztech123]

As you've already done with <br /> can put other HTML tags in the descriptions, example:

["4.jpg", "", "", "<b style='font-size: 115%;'>Service you can rely upon.</b> <br /><br /> <span style='font-size: 90%;'>Now you can free up time to concentrate on your organization</span>"] //<--no trailing comma after very last image element!

Thanks for the reply, jscheuer1. Unfortunately, that causes the page to not load at all!

I tried this and had a bit of luck changing font styles.

"<b>Service you can rely upon.</b> <br /><br /> <i>Now you can free up time to concentrate on your organization</i>"

Will keep experimenting to apply your font size tags.

[ajfmrf]

Using bold is not exactly making a font larger-just bigger/fuller.

If you want to do better with the font size post a link to your page please.

[jscheuer1]

.

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.

Thanks for the reply, jscheuer1. Unfortunately, that causes the page to not load at all!

One or both of us made a typo. The nesting of quotes in something like this, if done improperly can easily break the entire script. It will work if done properly. Ideally one would use spans or divs with class. That way nested quotes can be avoided and complex styles can be applied from a stylesheet, example:

["4.jpg", "", "", "<span class=largetext>Service you can rely upon.</span> <br /><br /> <span class=smalltext>Now you can free up time to concentrate on your organization</span>"] //<--no trailing comma after very last image element!

Then in the stylesheet (again, for example):

.largetext {
	font-size: 115%;
	font-weight: bold;
}
.smalltext {
	font-size: 95%;
}

Using bold is not exactly making a font larger-just bigger/fuller.

If you want to do better with the font size post a link to your page please.

I agree. That's not what I suggested anyway. And you're right. It would be much easier to help if we had a link to the live page.

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.

[ztech123]

Apologies for late reply.

I have used span class but the page still doesn't load.

I have the page live at this link

Thanks again

[jscheuer1]

The main problem (there could be others, but fixing just this got it working here) with that page is that the imagearray isn't closed (from the page's source code, missing bracket and comma inserted highlighted and red):

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [998, 433], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["1.jpg", "", "", "<span class=largetext>Stand Out from the crowd.</span> <br /><br /> <span class=smalltext>Leave your accounting worries to us</span>"],
		["2.jpg", "", "", "<span class=largetext>Competent advice when you need it.</span> <br /><br /> <span class=smalltext>Receive quick responses about your organization's Financial needs</span>"],
		["3.jpg", "", "", "<span class=largetext>Tailored to your needs.</span> <br /><br /> <span class=smalltext>We will discuss with you exactly what you need</span>"],
		["4.jpg", "", "", "<span class=largetext>Service you can rely upon.</span> <br /><br /> <span class=smalltext> Now you can free up time to concentrate on your organization</span>"] //<--no trailing comma after very last image element!	],
	],
	displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 2000, //transition duration (milliseconds)
	descreveal: "peekaboo",
    togglerid: "" 
})


</script>

[ztech123]

Thanks very much John. The ], was indeed the whole reason nothing was working for me.