Pages creation

[Arai]

Hi,

I'd like to use Pages to create something like this: http://clarity-dojo.com/video/ (the image thumbnails).

And when you click the image it, it will display the contents e.g. http://clarity-dojo.com/topic/108-tower-of-mushin/#comment-272 through a pop up window.

The idea behind this is that I have 13+ of those threads and I'd like to have them all on one page, with image previews and the content would be displayed to the user upon clicking. The images/previews would have a description like in gallery so for those that don't know what the images are, they can resort to reading the description.

Problem is I don't know where to start (nor am I good at coding in html).

[Chris Bell]

its VideoBox  application (maybe moded slightly) by Bim

Live demo: http://demo.ipsviet.com

Discussion topic: here

[Arai]

I know what it is, clarity-dojo is my website

[Chris Bell]

oops, should have read more carefully

either way i still enjoy talking to my favorite helmet

[Arai]

This is how far I got: http://clarity-dojo.com/overview/ not exactly what I had in mind, but comes close.

Need to color the text still and not sure how to get the on-click / pop-up (it's just usage of tables atm).

 

<table border="0" cellpadding="4" width="100%">
	<tbody>
		<tr>
            <td align="middle"><img border="0" src="http://clarity-dojo.com/uploads/monthly_2015_07/equipgem_musin_extra.png.7a7df6a2d1fff720fb4121aaa522dd67.png" width="180" /></td>
			<td align="middle"><img border="0" src="http://clarity-dojo.com/uploads/monthly_2015_07/equipgem_musin_extra.png.7a7df6a2d1fff720fb4121aaa522dd67.png" width="180" /></td>
			<td align="middle"><img border="0" src="http://clarity-dojo.com/uploads/monthly_2015_08/equipgem_dongchun_extra.png.380b4b4e96562b4b065942089df0068a.png" width="180" /></td>
			<td align="middle"><img border="0" src="http://clarity-dojo.com/uploads/monthly_2015_08/equipgem_paldok_extra.png.3465efc01514e5312796fe6d8ce964da.png" width="180" /></td>
			<td align="middle"><img border="0" src="http://clarity-dojo.com/uploads/monthly_2015_08/equipgem_suweolhero1_extra.png.17c51618d6065d648b8c34fe6a7ac0ef.png" width="180" /></td>
		</tr>
		<tr>
            <td align="middle" bgcolor="transparent"><a href="http://clarity-dojo.com/topic/80-god-of-war/" target="_blank">Lv. 45 Crit God of War</a></td>
			<td align="middle" bgcolor="transparent">Lv. 45 Crit - Tower of Mushin</td>
			<td align="middle" bgcolor="transparent">Lv. 45 Crit Bloody Shark Harbor</td>
			<td align="middle" bgcolor="transparent">Lv. 45 Crit - Spider Queen</td>
			<td align="middle" color=#02c7e9;> Lv. 45 Crit - Lost Lyn Spirits</td>
		</tr>
		<tr>
	</tbody>
</table>

 

[Chris Bell]

this might be helpful 

[Arai]

No.

This would be the pop up I'm referring to, javascript it seems.

I don't think this creation will bare fruit, but was worth a try.

[Chris Bell]

you can look for an existing element that use this popup container and use it for what you need,

using the post tools i directed you to;start by tracing from the button that you click on, not the pop up itself,

the button will take you to a subroutine that may contain the class you're looking; or a reference to another class;

which you will need to keep tracing until you find the nested class you need to edit or copy