Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : 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 ...
_Shulkie_
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
TopBottom

Mottie (SuperAdmin) 5/1/2010 11:32 AM EST : RE: Dynamically adding facebox popup to images posted...
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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)
.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 

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Lord Trist (Applicant) 3/27/2011 8:53 AM EST : RE: Dynamically adding facebox popup to images posted...
Lord Trist
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
TopBottom

Mottie (SuperAdmin) 3/27/2011 10:21 AM EST : RE: Dynamically adding facebox popup to images posted...
ACK!
Mottie
Posts: 3884

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>
<!--
********************************************
Add this to your code box
(in a free form text/HTML type content box).
It will hide itself
********************************************
-->
<div class="hideThisWidget"></div>
<script type="text/javascript">
$(document).ready(function(){
 $('.hideThisWidget').closest('.gpWidget').hide();
})
</script>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

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!
TopBottom

lordbrutal (Member) 4/1/2012 1:14 PM EST : RE: Dynamically adding facebox popup to images posted...
lordbrutal
Posts: 108

0
Like

0
Dislike

i want to make the images open in a new page,  how i do it?
Characters: Brutal
TopBottom

Mottie (SuperAdmin) 4/1/2012 4:57 PM EST : RE: Dynamically adding facebox popup to images posted...
ACK!
Mottie
Posts: 3884

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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Aireen (Applicant) 9/29/2012 5:57 PM EST : RE: Dynamically adding facebox popup to images posted...
Aireen
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>
<!--
********************************************
Add this to your code box
(in a free form text/HTML type content box).
It will hide itself
********************************************
-->
<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.
TopBottom

Mottie (SuperAdmin) 9/30/2012 8:01 AM EST : RE: Dynamically adding facebox popup to images posted...
ACK!
Mottie
Posts: 3884

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")});});
});

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

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 
TopBottom

 
 
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 )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%