Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+6 votes
1.8k views
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:

lightbox-q2a-screenshot

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

Please log in or register to answer this question.

...