Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+6 votes
in Q2A Core by
edited by

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)



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: 

    width: 100%;
    display: none;
    margin: 6% auto;
    width: auto;
img#lightbox-img {


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:

    // lightbox effect for images
    $(".entry-content img").click(function(){
        $("#lightbox-img").attr("src", $(this).attr("src"));
        // center vertical
        $("#lightbox-center").css("margin-top", ($(window).height() - $("#lightbox-center").height())/2  + 'px');

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

Please log in or register to answer this question.