Hello There, Guest! Login Register
Divination Competition!

  • 0 Vote(s) - 0 Average


04-05-2016, 12:39 PM #11
Insert GPs Offline Pretty close to Forum God *******
Posts:1,787 Threads:123 Joined:Sep 2012 Reputation: 11 RS name Insert GPs
(04-05-2016, 11:55 AM)TzTok Will Wrote:  
(04-05-2016, 08:18 AM)Insert GPs Wrote:  
(04-05-2016, 07:07 AM)TzTok Will Wrote:  
(04-05-2016, 06:28 AM)Insert GPs Wrote:  
(04-05-2016, 12:32 AM)F O X Wrote:  Good luck beating that score guys =P

Also the RuneClan logo just links to the logo O_O

Ok that logo links to just the full size picture now...
I still need to figure out a way to allow links on pictures...
Nows my time to shine.

Amaze me!

Code:
Regex:
\[img\](.*?)\[/img\]

Code:
Replacement:
<a href="javascript:void(0)" onclick="window.open('$1', '', 'toolbar=no');myWindow.focus();"><img src="$1" style="max-width: 700px; max-height: 500px;" alt="İmage" title="Click Photo To Enlarge" /></a>

Code:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
.enlargeContainer{position:relative;display:inline-block}
.enlargeContainer:hover .enlargeImage{display:block}
.enlargeImage{position:absolute;top:0;right:0;padding:5px;margin:5px;background:#fff;display:none}
</style>
</head>
<body>
<a href="http://test.com">
<div class="enlargeContainer">
<span class="enlargeImage" data-url="https://placehold.it/350x150"><i class="fa fa-expand"></i></span>
<img src="https://placehold.it/350x150" style="max-width:700px;max-height:500px" alt="İmage" title="Click Photo To Enlarge">
</div>
</a>
<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>
<script>
$('.enlargeImage').on('click', function(e){
e.preventDefault();
var url = $(this).data('url');
window.open(url, '', 'toolbar=no');
});
</script>
</body>
</html>

Font awesome is already added, so that's no problemo. That styling is basic af, but it works. When you hover over the div, it shows the enlarge icon, if you click that, bingo bango enlarged image, if you click the image itself, it'll default to the surrounding link (if there is one, incases of [a][/a])

edit:

so the replacement for the image shortcode is (assuming all the css and js is added just the same):

Code:
<div class="enlargeContainer">
                   <span class="enlargeImage" data-url="$1"><i class="fa fa-expand"></i></span>
                   <img src="$1" style="max-width:700px;max-height:500px" alt="İmage" title="Click Photo To Enlarge">
           </div>

Pff I knew that...
stupid web2.0 developers... thinking they know everything...

I implemented it right away.
Test it plenty please!

And Will awesome work!

04-05-2016, 02:09 PM #12
TzTok Will Offline AvatarTracker Creator *
Posts:459 Threads:53 Joined:Mar 2014 Reputation: 0 RS name TzTok Will
yay I contributed!

04-05-2016, 03:52 PM #13
F O X Offline ^ Made the 20,000th post! *
Posts:2,567 Threads:346 Joined:Apr 2014 Reputation: 15
Now everything has a resize button beside it. Save us!

Only images over a certain size should have link.


İmage



04-05-2016, 04:31 PM #14
Insert GPs Offline Pretty close to Forum God *******
Posts:1,787 Threads:123 Joined:Sep 2012 Reputation: 11 RS name Insert GPs
(04-05-2016, 03:52 PM)F O X Wrote:  Now everything has a resize button beside it. Save us!

Only images over a certain size should have link.

Only when you hover over the image.
I'd say that is a fair compromise.
the two options we started with were :
1- hugeassmega images that broke the entire layout
2- ALL images limited to 500 px width, NO BIG IMAGES.

So I'd say what we came to now is quite nice.

04-05-2016, 09:27 PM #15
TzTok Will Offline AvatarTracker Creator *
Posts:459 Threads:53 Joined:Mar 2014 Reputation: 0 RS name TzTok Will
(04-05-2016, 04:31 PM)Insert GPs Wrote:  
(04-05-2016, 03:52 PM)F O X Wrote:  Now everything has a resize button beside it. Save us!

Only images over a certain size should have link.

Only when you hover over the image.
I'd say that is a fair compromise.
the two options we started with were :
1- hugeassmega images that broke the entire layout
2- ALL images limited to 500 px width, NO BIG IMAGES.

So I'd say what we came to now is quite nice.

It would look a little cleaner if the image popup was the size of the image:


Code:
            $('.enlargeImage').on('click', function(e){
                e.preventDefault();
                var url = $(this).data('url');
                $('<img>').attr('src', url).on('load', function(){
                    window.open(url, '', 'toolbar=no,width=' + (this.width < 2000 ? this.width : 2000) + ',height=' + (this.height < 1500 ? this.height : 1500));
                });
            });

the 2000 width, 1500 height thing is just a maximum, so if the image is like 15k px wide, it wont make a monster popup.


If you wanted to make it so the popup button only comes up on bigger images, I made this if you want javascript:

Code:
$('.enlargeContainer').each(function(){
                var $this = $(this);
                var $img = $this.find('img');
                $('<img>').attr('src', $img.attr('src')).on('load', function(){
                    if (this.width > 700 && this.height > 500) {
                        $this.find('.enlargeImage').remove();
                        $img.attr('title', '');
                    }
                });
            });

and this if you want php:

Code:
$size = @getimagesize($1);
if (isset($size[0], $size[1]) && $size[0] > 700 && $size[1] > 500):
    $replacement = '<div class="enlargeContainer">
        <span class="enlargeImage" data-url="' . $1 . '"><i class="fa fa-expand"></i></span>
        <img src="' . $1 . '" style="max-width:700px;max-height:500px" alt="İmage" title="Click Photo To Enlarge">
    </div>';
else:
    $replacement = '<img src="' . $1 . '" style="max-width:700px;max-height:500px" alt="İmage">';
endif;

I didn't test the php, but I'm sure it'll work.

04-12-2016, 03:56 PM #16
Matty Ice Offline Senior Member ****
Posts:351 Threads:36 Joined:Feb 2014 Reputation: 1
Winner Winner Chicken Dinner!!

04-12-2016, 05:37 PM #17
Insert GPs Offline Pretty close to Forum God *******
Posts:1,787 Threads:123 Joined:Sep 2012 Reputation: 11 RS name Insert GPs
(04-05-2016, 09:27 PM)TzTok Will Wrote:  
(04-05-2016, 04:31 PM)Insert GPs Wrote:  
(04-05-2016, 03:52 PM)F O X Wrote:  Now everything has a resize button beside it. Save us!

Only images over a certain size should have link.

Only when you hover over the image.
I'd say that is a fair compromise.
the two options we started with were :
1- hugeassmega images that broke the entire layout
2- ALL images limited to 500 px width, NO BIG IMAGES.

So I'd say what we came to now is quite nice.

It would look a little cleaner if the image popup was the size of the image:


Code:
$('.enlargeImage').on('click', function(e){
e.preventDefault();
var url = $(this).data('url');
$('<img>').attr('src', url).on('load', function(){
window.open(url, '', 'toolbar=no,width=' + (this.width < 2000 ? this.width : 2000) + ',height=' + (this.height < 1500 ? this.height : 1500));
});
});

the 2000 width, 1500 height thing is just a maximum, so if the image is like 15k px wide, it wont make a monster popup.


If you wanted to make it so the popup button only comes up on bigger images, I made this if you want javascript:

Code:
$('.enlargeContainer').each(function(){
var $this = $(this);
var $img = $this.find('img');
$('<img>').attr('src', $img.attr('src')).on('load', function(){
if (this.width > 700 && this.height > 500) {
$this.find('.enlargeImage').remove();
$img.attr('title', '');
}
});
});

and this if you want php:

Code:
$size = @getimagesize($1);
if (isset($size[0], $size[1]) && $size[0] > 700 && $size[1] > 500):
$replacement = '<div class="enlargeContainer">
<span class="enlargeImage" data-url="' . $1 . '"><i class="fa fa-expand"></i></span>
<img src="' . $1 . '" style="max-width:700px;max-height:500px" alt="İmage" title="Click Photo To Enlarge">
</div>';
else:
$replacement = '<img src="' . $1 . '" style="max-width:700px;max-height:500px" alt="İmage">';
endif;

I didn't test the php, but I'm sure it'll work.

Never noticed this reply...

The first snippet works like a charm!
However the 2nd snippet ( supposed to not show the container on smaller images ) doesn't work.
Out of the box it doesn't work because of the way all the files are parsed.
Any '$var' string will be parsed as part of the mybb templates therefor not be printed to the output html.

I haven't put much effort in changing the snippet.

All in all very well done Will, and many many thanks!






Forum Jump:


Users browsing this thread:1 Guest(s)