"Dynamically adding facebox popup to images posted to GP forum" : Forums : Help-Site - World of Warcraft Durotan server - Guild Hosting - GuildPortal

• Login: Password: Save New User? Forgot?

Home

Forums

Code

Forums

: > Dynamically adding facebox popup to images posted to GP forum

_Shulkie_ (Member)

5/1/2010 5:14 AM EST : Dynamically adding facebox popup to images posted to ...

Posts: 467

0
Like

0
Dislike

I added CSS to force images posted to our forum to be a max of 500px wide, but have been wracking (or wrecking?!?) my brain trying to figure out how to dynamically add the popup functionality to the images so they can be seen fullsize.

After digging into the jquery docs and the GP CSS i came up with the code below

what it does is cycles through all images which are descendants of page elements with the class ".MessageBodyCell1" but that are not descendants of ".MessageSignature" and adds an onclick event which pops open a facebox window with the original image in it

useful? or already covered

$(document).ready(function() {

$( ".MessageBodyCell1 img" ).not('.MessageSignature img').each(function(){

$( this ).bind ("click",function(){ jQuery.facebox({ image: $( this ).attr("src")});});

});

Cheers, Shulkie

•

Mottie (SuperAdmin)

5/1/2010 11:32 AM EST : RE: Dynamically adding facebox popup to images posted...

ACK!

Posts: 3873

0
Like

0
Dislike

Hi _Shulkie_!

Thanks for posting this! I appreciate any and all input, ideas and feedback

.MessageBodyCell1 img {
max-height: 500px;
max-width: 600px;
cursor: pointer;
}

So, I added _Shulkie_'s script to my forum pages (in a hidden free form text/HTML widget). And here is a really big image that has its size limited, click on it and see what happens

>>help-site<<

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

•

Lord Trist (Applicant)

3/27/2011 8:53 AM EST : RE: Dynamically adding facebox popup to images posted...

Posts: 907

0
Like

0
Dislike

Mottie said:

Hi _Shulkie_!

Thanks for posting this! I appreciate any and all input, ideas and feedback

Just in case someone doesn't understand what you were describing, I decided to include a demo...

First off, if you add a huge image to these forums, the size will become adjusted because of this CSS (sorta)

________
Hello im not to experienced in CSS/HMTL but i found this code and the code to hide a widget however i cant get them to combine any chance one of you could post what exactly i would copy and paste into the free text/HTML widget i assume i just have something in the wrong order or something XD thank you for any help and for giving us all these codes for code illetrate people like me haha

•

Mottie (SuperAdmin)

3/27/2011 10:21 AM EST : RE: Dynamically adding facebox popup to images posted...

ACK!

Posts: 3873

0
Like

0
Dislike

Hi Lord Trist!

Here is the combined code. It should be added to a Free Form Text/HTML widget in RAW mode (link in the upper right corner)

<style type="text/css">
.MessageBodyCell1 img {
max-height: 500px;
max-width: 600px;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$( ".MessageBodyCell1 img" ).not('.MessageSignature img').each(function(){
$( this ).bind ("click",function(){ jQuery.facebox({ image: $( this ).attr("src")});});
});
});
</script>

<div class="hideThisWidget"></div>
<script type="text/javascript">
$(document).ready(function(){
$('.hideThisWidget').closest('.gpWidget').hide();
})
</script>

>>help-site<<

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

•

Lord Trist (Applicant)

3/27/2011 3:49 PM EST : RE: Dynamically adding facebox popup to images posted...

Lord Trist Posts: 907 0 Like 0 Dislike	AHHH raw mode was my problem thank you so much!
•

lordbrutal (Member)

4/1/2012 1:14 PM EST : RE: Dynamically adding facebox popup to images posted...

lordbrutal Posts: 105 0 Like 0 Dislike	i want to make the images open in a new page, how i do it? Characters: Brutal
•

Mottie (SuperAdmin)

4/1/2012 4:57 PM EST : RE: Dynamically adding facebox popup to images posted...

ACK!

Posts: 3873

0
Like

0
Dislike

Hi LordBrutal!

For any links to open in a new page, do not use the code above. Instead, copy the following HTML template (switch the editor into <> HTML mode, above the cancel button at the bottom):

<a href="http://location-of-my-image/myimage.jpg" target="_blank">
<img src="http://location-of-my-image/myimage.jpg" alt="">
</a>

Notice that the URL's in orange point to the same image. You can change the href URL to point to a larger image if you want to, but the important piece of information here is the target="_blank" which forces the browser to open the link in a new tab.

>>help-site<<

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

•

Aireen (Applicant)

9/29/2012 5:57 PM EST : RE: Dynamically adding facebox popup to images posted...

Posts: 24

0
Like

0
Dislike

Mottie said:

Hi Lord Trist!

Here is the combined code. It should be added to a Free Form Text/HTML widget in RAW mode (link in the upper right corner)

<style type="text/css">
.MessageBodyCell1 img {
max-height: 500px;
max-width: 600px;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$( ".MessageBodyCell1 img" ).not('.MessageSignature img').each(function(){
$( this ).bind ("click",function(){ jQuery.facebox({ image: $( this ).attr("src")});});
});
});
</script>

<div class="hideThisWidget"></div>
<script type="text/javascript">
$(document).ready(function(){
$('.hideThisWidget').closest('.gpWidget').hide();
})
</script>

hello mottie you add this code in Custom HTML & Script in Custom JS/JQuery or Custom CSS? tryed but he resized everything not only pic also you can't add this in a widget somehow like other widgets
thank you. Is sucks when someone post a screen shoot is huge your template change after the pic is rely sucks.

•

Mottie (SuperAdmin)

9/30/2012 8:01 AM EST : RE: Dynamically adding facebox popup to images posted...

ACK!

Posts: 3873

1
Like

0
Dislike

Hi Aireen!

That code is meant to be added to a Free Form Text/HTML type widget added to your forums page. But yes, alternatively you can add it into the custom css and custom JS/JQuey like this:

Add this to your custom css (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard)

.MessageBodyCell1 img {
   max-height: 500px;
   max-width: 600px;
   cursor: pointer;
}

Then add this to the custom script (Control Panel > Custom HTML & Script > Custom JS/JQuery > Document Ready Event)

$( ".MessageBodyCell1 img" ).not('.MessageSignature img').each(function(){
$( this ).bind ("click",function(){ jQuery.facebox({ image: $( this ).attr("src")});});
});

>>help-site<<

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

•

Aireen (Applicant)

9/30/2012 2:47 PM EST : RE: Dynamically adding facebox popup to images posted...

Aireen Posts: 24 0 Like 0 Dislike	thank you so much mottie he work perfect now
•

Key

	New posts		No new posts
	New posts ( popular )		No new posts ( popular )
	New posts ( sticky )		No new posts ( sticky )
	New posts ( locked )		No new posts ( locked )

%title%