For all who do not know how to handle q2a, get the premium plugin at: http://www.q2apro.com/plugins/lightbox - The installation is dead-simple:
1. Buy plugin, download, unzip
2. upload plugin to server
3. done
---
I thought this is worth sharing: What is a Lightbox effect: Click on an image within a question or answer, and a sami-transparent layer pops up showing the image full size and centered:
Implemented in questions/answers of: Gute-Mathe-Fragen.de (Demo)
Lightbox-Tutorial:
Steps you have to do to achieve this effect:
1. open up your advanced theme file: qa-theme.php where you should have a custom function body_content(). There you add (before $this->body_suffix(); ):
// output lightbox for image popup at end of body, pseudo image for valid html
$this->output('<div id="lightbox-popup"> <div id="lightbox-center"> <img id="lightbox-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Lightbox" /> </div> </div>');
2. open your custom theme css file: qa-styles.css and add in the end:
#lightbox-popup{
background:#000000;
background:rgba(0,0,0,0.75);
height:100%;
width: 100%;
position:fixed;
top:0;
left:0;
display: none;
z-index:1119;
}
#lightbox-center{
margin: 6% auto;
width: auto;
}
img#lightbox-img {
padding:25px;
background:#FFF
}
3. open your javascript file, I am using qa-page.js and add all my javascript in there. So add these lines into jquery's ready routine:
$(document).ready(function(){
// lightbox effect for images
$(".entry-content img").click(function(){
$("#lightbox-popup").fadeIn("slow");
$("#lightbox-img").attr("src", $(this).attr("src"));
// center vertical
$("#lightbox-center").css("margin-top", ($(window).height() - $("#lightbox-center").height())/2 + 'px');
});
$("#lightbox-popup").click(function(){
$("#lightbox-popup").fadeOut("fast");
});
});
4. upload all your files to the server (backup before overwrite)
5. Full reload of your site CTRL+SHIFT+R in firefox.
6. click on an image within a question or answer, it should lightbox-pop-up :)
