Images and viewing

**ashley76** · May 21, 2011

Can we get it so that when you are viewing an article and you click on an image, I would like for it to open up in a lightbox type screen, so that you can go through the rest of the images in the article.

Currently when you click an image, it takes you to the image page, and then you have to click the thumbnail to get the big image...

**pegasus** · May 25, 2011

If you have used the format:

Code:

[image]file.ext|thumb|caption[/image]

Including thumb will add an icon that looks like two rectangles. Clicking the icon should open the lightbox.
I believe the lightbox is only used for thumbnail images.

**ashley76** · May 25, 2011

interesting, I will give it a try... will this be affected in upcoming versions, if I go and change this for all images?

**pegasus** · May 25, 2011

We currently have no plans to remove "thumb" for images so it should be fine.

**ashley76** · May 26, 2011

Is there a reason that the thumbnails are "right-aligned"? Also the thumbnails are backwards as compared to the code order...

http://www.kordindustries.com/dcwiki...se_Classics_14

Here is an example of the code for those images...

Code:

[image]dcuc14_green_lantern.jpg|thumb|Green Lantern - Alan Scott[/image][image]dcuc14_green_lantern_front.jpg|thumb|Green Lantern - Alan Scott[/image][image]dcuc14_green_lantern_back.jpg|thumb|Green Lantern - Alan Scott[/image]

**pegasus** · May 26, 2011

You can left-align them using |left

They are right aligned automatically to not break the text-flow and let you put text next to them. They are in reverse order because I think right alignment makes the browser think block elements are Right-To-Left reading direction.

**ashley76** · May 27, 2011

Okay so check out this link and look at what "References" is doing to my images at the bottom...

Here is the code, if you want to check it out...

Code:

Kenner released Parademon and other evil Darkseid henchmen for the 2nd series figure wave released in 1985. The character represents the only true "army building" possibility from the line. Darkseid commanded legions of Parademons to carry out his evil plans, so multiple quantities of the figure in a Super Powers collection or diorama makes sense. Parademon was designed to exhibit a "Battle Flight" power causing the arms to move in a flight-like fashion. Kenner failed to utilize an internal tray inside the blister card's bubble to secure Parademon inside. As such, packaged specimens are notorious for containing paint worn or detached arm figures caused by the figure shifting inside the large bubble. The oversized bubble's limited support also contributes to a difficulty in locating carded examples with mint bubbles[FOOTNOTE=1]Kennersuperpowers.com[/FOOTNOTE].

[H="2"]Powers[/H]

Although the Parademons of Apokolips wear protective armor and can fly, their true strength is in their numbers. There are literally thousands of them, and, when acting together, they can overcome even the most powerful heroes.

[H="2"]Statistics[/H]

Weaknesses: Individual Parademons are vulnerable. Together, they seldom attack in an organized fashion, hence, they can be defeated.

Enemies: The Heroes of Earth, The New Gods

Secret Identity: None


[H="2"]Information[/H]

    * MSRP: $3.99
    * Series: [WIKI]Super Powers[/WIKI]
    * Release Date: 1985
    * Wave Information: 2
    * UPC / Barcode: 7628167000
    * Suggested Age: Ages 4+
    * Articulation: Shoulders, Hips, Knees
    * Size Class: 5"
    * Accessory 1: Mini Comic
    * Accessory 2: Yellow Gun
    * Manufacturer: [WIKI]Kenner[/WIKI]


[H="2"]Image(s)[/H]
[image]sp_parademon.jpg|thumb|left|Parademon[/image][image]sp_parademon_comic.jpg|thumb|left|Parademon[/image]






[H="2"]Refrences[/H]
[REFLIST][/REFLIST]

**pegasus** · May 28, 2011

Yes, this is expected behavior if you understand the way CSS works. As I mentioned earlier, this is mainly for letting you put text next to the images, and that's what's happening here.

To force a new line after the images, the images need a container. You want to enclose the images in a TABLE or DIV tag with class="floatcontainer" like so:

Code:

[div] class="floatcontainer" |
[image]blah[/image]
[/div]

DIV must be turned on in Wiki Code Manager first in order for this to work.

**ashley76** · May 28, 2011

gothcha! Thanks

**ashley76** · May 28, 2011

So how would you get it to keep the same look (with border and name under thumbnail) but, have a return so that the next header is underneath?

**pegasus** · May 29, 2011

Using the DIV as above should work. Just put your thumbed images inside it.

**ashley76** · May 30, 2011

that's what I did, but it takes away the thumbnail aspect of the images. Makes them "Unclickable" and takes away title...

**pegasus** · May 30, 2011

It shouldn't do that if you're still using |thumb

DIV wouldn't have any effect on the images themselves, you're just putting them in a box so they stay where you put them.

Post the code you're using if you're still having problems.