[3.2][3.3][RC] Flip BBCode

[Sniper_E]

Extension Name: Flip Images BBCode
Author: Sniper_E
Extension Description: Adds flip BBCode to posting. Flips 2 images on hover.
Insert two different image urls... Use the largest width and height of the two images.

Demo: Two Examples (Plus a couple of flips in the header)
Flip images: [flip=front-image-url,width-number,height-number]back-image-url[/flip]



Extension Download: flipimages_1.0.0.zip

Installation:

1. Download the latest release and unzip content.
2. Copy the contents to ext/sniper/flipimages/
3. Enable extension in the ACP

Enjoy!

[scheccia]

In mobile mode, you can't see anything

[Sniper_E]

It's hidden...

Code: Select all

@media (max-width: 600px) { .flip-bbcode { display: none; } }

Flip does not work in small resolution. It want show the image but it will still take up the space. So I hid it at 600px resolution.

Try sideways view on your mobile it's not hidden there.

[max-ima]

Extension Download: The selected attachment does not exist anymore.

[Sniper_E]

Sorry, just saw this again. First post updated.

[Bruce Banner]

Hi. Sorry, just noticed a problem with the helpline. When you hover over the icon, instead of

Code: Select all

Flip images: [flip=front-image-url,width-number,height-number]back-image-url[/flip]

what appears is actually just

Code: Select all

FLIPIMAGE_EXPLAIN

[Sniper_E]

Sorry that should be FLIPIMAGES_EXPLAIN in styles/template/event/vse_abbc3_posting_editor_buttons_custom_tags_before.html
Change the title in that line to title="{{ lang('FLIPIMAGES_EXPLAIN') }}" <- It is missing the S

[Bruce Banner]

Sorry that should be FLIPIMAGES_EXPLAIN in styles/template/event/vse_abbc3_posting_editor_buttons_custom_tags_before.html
Change the title in that line to title="{{ lang('FLIPIMAGES_EXPLAIN') }}" <- It is missing the S

Great, that did it, thanks.

[nou nou]

Will try this out! Very useful for before/after images

[eunaumtenhoid]

Excellent, does this work with text too? When you hover the mouse over an image it changes and shows text

[Sniper_E]

Sure, if you have an image with text in it.
Just kidding... but not really kidding... My logo on my site has text images.

I've actually never tried flipping to text, but yes it can be done.
Just tested at my site and it didn't work. The bbcode would have to change to make that possible.

I had to created a new bbcode to make that possible.

bbcode

Code: Select all

[flip2text={URL1},{NUMBER1},{NUMBER2}]{SIMPLETEXT}[/flip2text]

html replacement

Code: Select all

<div class="flip-bbcode" style="width: {NUMBER1}px;height: {NUMBER2}px">
	<div class="flip-box">
		<div class="flip-box-inner">
			<div class="flip-box-front">
				<img src="{URL1}" alt="" />
			</div>
			<div class="flip-box-back">
				{SIMPLETEXT}
			</div>
		</div>
	</div>
</div>

You can check out my test post using that bbcode @ Flip Image to Text

[eunaumtenhoid]

nice, tks!