InsaneJournal

Tweak says, "Sometimes. At Two. On Mondays."

Ally -- are you already gone? (wastintime) wrote in rp_tutorials,
@ 2011-03-29 12:31:00

Entry tags:

tools: html

Customizable HTML Slideshow

Live Example

←

→

Caption

←

→

Link Caption

←

→

long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption

Code

<lj-raw><center><div style="width:600px;height:440px;overflow:hidden;text-align:center;font-family:Bookman Old Style;font-size:12px;color:black;">

<a name="one"></a><br />
<a href="#three" style="text-decoration:none;">←</a> <a href="#two"><img src="http://i.imgur.com/QC8wh.jpg" style="height:350px;border:2px solid #888;padding:4px;"></a> <a href="#two" style="text-decoration:none;">→</a><br />
<div style="overflow:auto;height:60px;">Caption</div>

<a name="two"></a><br />
<a href="#one" style="text-decoration:none;">←</a> <a href="#three"><img src="http://i.imgur.com/J03pJ.jpg" style="height:350px;border:2px solid #888;padding:4px;"></a> <a href="#three" style="text-decoration:none;">→</a><br />
<div style="overflow:auto;height:60px;"><a href="" target="_blank" style="text-decoration:none;">Link Caption</a></div>

<a name="three"></a><br />
<a href="#two" style="text-decoration:none;">←</a> <a href="#one"><img src="http://i.imgur.com/teZJ5.jpg" style="height:350px;border:2px solid #888;padding:4px;"></a> <a href="#one" style="text-decoration:none;">→</a><br />
<div style="overflow:auto;height:60px;">long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption long caption</div>

</div></center></lj-raw>

Go nuts with it!

Based off of this code.

Questions/Feedback?
Leave a comment to this post. Thanks!

(Read comments) - (Post a new comment)

	inspiredmod 2011-09-14 06:58 am UTC (link)
	I just have a couple questions for modification... How can I make it so that the caption text doesn't get that scroll bar? And then on the second image, the arrows aren't in the right spot and some of the text is cut off, and I'm not sure why. Thanks! (Reply to this) (Thread)

	inspiredmod 2011-09-14 06:58 am UTC (link)
	Link! Sorry, I forgot to include that :) (Reply to this) (Parent)

wastintime
2011-09-14 02:34 pm UTC (link)

Here you go:

<a name="one"></a><br />
<a href="#four" style="text-decoration:none;">←</a> <a href="#two"><img src="http://i53.tinypic.com/se0zns.jpg" style="height:350px;border:2px solid #888;padding:4px;"></a> <a href="#two" style="text-decoration:none;">→</a><br />
<div style="overflow:auto;height:70px;margin-bottom:10px;">Davis University<br />Main Building<br />Housed here is the Office of the President, Student Accounting Services, and Campus Information Services.</div>

<a name="two"></a><br />
<a href="#one" style="text-decoration:none;">←</a> <a href="#three"><img src="http://i56.tinypic.com/2qlzbjl.jpg" style="height:350px;border:2px solid #888;padding:4px;"></a> <a href="#three" style="text-decoration:none;">→</a><br />
<div style="overflow:auto;height:70px;margin-bottom:10px;">Lincoln Hall<br />Housed here are the Engineering, Chemistry, Physics, and Biomedical Programs.</div>

<a name="three"></a><br />
<a href="#two" style="text-decoration:none;">←</a> <a href="#four"><img src="http://i56.tinypic.com/24awvau.gif" style="height:350px;border:2px solid #888;padding:4px;"></a> <a href="#four" style="text-decoration:none;">→</a><br />
<div style="overflow:auto;height:70px;margin-bottom:10px;">Logan Hall<br />Housed here are the English and History Programs.</div>

<div style="overflow:auto;height:70px;margin-bottom:10px;">Maxine Pullman Library<br />The University Library.</div>

</div></lj-raw></center>

What happened is... 1) the second picture was too wide for the original settings so I had to widen the overall viewing div box. So, it was putting everything on separate lines which made it taller than the viewing box so things got cut off. 2) The scroll bar appears when the text is too big for the space. Though increasing the viewing div width took care of it, I increased the viewing div box height a little bit so you should be able to add another line without scroll bars. 3) Some of your links were wrong, so it wasn't clicking through the slideshow properly. I fixed that. :)

(Reply to this) (Parent) (Thread)

	inspiredmod 2011-09-14 03:23 pm UTC (link)
	Thanks! (Reply to this) (Parent)

(Read comments) -