InsaneJournal

Tweak says, "Figment of whose imagination?"

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!

(Post a new comment)

evaakeru
2011-03-29 10:29 pm UTC (link)

I would so love to use this idea in a game I am in, but I am honestly retarded on how to get the idea of the Magic Click or this to work with the layout we already have. Yes, I am DIV stuuuuuupid.

I've tried to get a couple of people to help me out but I am getting stonewalled. :-(

Yes, that is my unhappy face. Sorry to post in this new thread but the past three I was really getting no reply.

(Reply to this) (Thread)

	wastintime 2011-03-29 11:34 pm UTC (link)
	Link to where you're trying to use it? So, I can see what's going on. Are you trying to use it as a layout for the journal itself? I don't think that will work. (Reply to this) (Parent) (Thread)

evaakeru
2011-03-29 11:53 pm UTC (link)

Not as the journal itself. Man, I would be NUTS :-)

So, this is the layout we want to use: http://www.graiae.com/new/locations.php

and I have your Magic Click code ready to go: http://www.graiae.com/new/buckets.php

But I have the dumbs when it comes to figuring out how to get the two to play nice

They are just up at my site to make them easier to revise, but they will be going on on IJ in a rpg.

I SO appreciate you taking a look at this. I want it to work so much and I have tried to play with it, but I am honestly just not understanding enough of DIV

(Reply to this) (Parent) (Thread)

	wastintime 2011-04-08 04:19 pm UTC (link)
	Sorry that it took so long to get back to you. Work and school are butt kickers. And hmm. It's working for me. (Reply to this) (Parent) (Thread)

	evaakeru 2011-04-09 07:04 am UTC (link)
	No problem!! It took two of us, but we got it to behave. Thanks :-) (Reply to this) (Parent)

	squidtastic 2011-03-29 10:48 pm UTC (link)
	Niceeee. Is that Kris Allen? ;) (Reply to this) (Thread)

	wastintime 2011-03-29 11:32 pm UTC (link)
	It actually is his arch nemesis Chris Allen. (Reply to this) (Parent)

	splott 2011-04-07 01:11 am UTC (link)
	could you do a picture and a mini-player youtube thing in the caption area? (Reply to this) (Thread)

	wastintime 2011-04-08 04:16 pm UTC (link)
	I haven't tried that, yet! I'll tinker and get back to you. :) (Reply to this) (Parent)

	wastintime 2011-04-08 04:29 pm UTC (link)
	Yeah, it works! But you have to change the caption div to be overflow:hidden or you get scroll bars, even with the margin correction. (Reply to this) (Parent) (Thread)

	splott 2011-04-08 04:30 pm UTC (link)
	can you do a different song for each picture? or does it take too much to load? (Reply to this) (Parent) (Thread)

	wastintime 2011-04-08 04:33 pm UTC (link)
	It'll take longer to load, like it does with the playlist setup, but it should work! I put the example code in my journal if you want to see. (Reply to this) (Parent)

	brownstoned 2011-05-01 04:39 am UTC (link)
	This is exactly what I was looking for! Thanks so much! <3 I'm running into a problem, though -- I'm trying to make a slideshow using just the first format thing (vertical picture with the caption) but for some reason it won't let me progress past the second picture. The third image just wont work! Any help would be great, and thanks so much! :) (Reply to this)

	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)