Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Mybb İmage Size No Plugin Mycode!
#1
Lightbulb 
Mybb İmage Size No Plugin Mycode

Theme Style /Global.css/Advanced mode
Code:
#maximage
{
max-width: 255px;
}


After Add MyCode


İmage Size Mycode

Title: maximage
Short Description: Mybb Max İmage No Plugin
Regular Expression:
Code:
\[img\](.*?)\[/img\]
Replacement:
Code:
<img onclick="javascript:window.location='$1';" src="$1" alt="İmage" id="maximage" title="Click Photo To Enlarge">
Enabled? : Yes

Demo: Demo İmage Size
Reply
#2
Useful and good but is there a way you can open the image on a lightbox or a pop-up window?
Proud Owner of The HD Forums since Aug 2009
[Image: dp93py.png]
Reply
#3
I just wanted to say thanks, this worked perfectly for me.
[Image: sig.jpg]

Reply
#4
(06-11-2010, 10:33 AM)E-Hero Kyle Wrote: Useful and good but is there a way you can open the image on a lightbox or a pop-up window?

Install fancyzoom. Than follow Bycca guide but for Replacement: use this instead.

Code:
<a href="$1" class=\"fancyzoom\"><img src="$1" alt="İmage" id="maximage" title="Click Photo To Enlarge"></a>

This should also work with lightbox, just remove fancyzoom and replace it with lightbox.
[Image: Jn29h.png]
DONATE TO PINGUY OS or show some love on Flattr.com
Reply
#5
I see you are using the ID tag for styling (id="imagesize"), instead of using CLASS (class="imagesize").

You do know that validation standards dictates you can only display an ID style tag once on any page, otherwise it will fail W3C validation. Try posting one or two or more images using the IMG tag in a post to see what I mean, then run that page through W3C validation service.

Use the CLASS (class="imagesize") instead, and add this to your CSS below.

Code:
.maximage {
max-width: 255px;
}

You can display a CLASS more than once on a page and it will still pass validation standards, unlike an ID. There should also be a backslash included in the IMG code to pass validation "/>".

Use this below instead.

Code:
<img onclick="javascript:window.location='$1';" src="$1" class="maximage" alt="İmage" title="Image" />

All that aside, very nice MyCode indeed. Much better than having to use a plug-in to resize external images in posts using the IMG tag, which if large would break your forum layout. I'm using it myself now.
Reply
#6
(02-13-2011, 04:22 PM)Gary Bolton Wrote: I see you are using the ID tag for styling (id="imagesize"), instead of using CLASS (class="imagesize").



Thanks for this, is there away when you click on image
to stay in same url in forum and just only show the image bigger
Sorry for my English
Reply
#7
I found out this will not work right with IE browsers, it has no effect. Unless you also add "max-height" to css code.

.maximage {
max-width: 640px;
max-height: 480px;
}
Reply
#8
You don't need to specify the protocol "javascript:" for the onclick attribute. The value of the title normally shows up as a popup balloon when the mouse hovers over the element, so you probably want to omit it.

Code:
<img onclick="window.location='$1';" src="$1" class="maximage" alt="İmage" />
Reply
#9
Ok thanks for the answers. I will try these
and see what happens

Big Grin
Reply
#10
Many many thanks Bycca and Gary this mycode is great and is much better than having a plug-in to resize images !!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)