Hello,
I just noticed this effect in chrome.
My solution
Lets implement a LIGHTBOX IMAGE EFFECT
chrome seems to have a bug in the way it handles it images and they are apparently trying to fix it
Lightbox effect can be implemented in core or base them
KAI of q2apro.com gave a tutorial sometime ago on how to implement a light box image in q2a
We can do same for pqa
the tutorial is;
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 :)
See lightbox demo in chrome on a mobile device http://www.mathelounge.de/274304/aktuelle-probleme-mathelehrern-mathelehrerinnen-vorbereitung
p.s You can just resize the browser to the the smallest minimum to see the mobile effect
original issue is seen here http://question2answer.org/qa/17523/implement-a-lightbox-effect-for-posted-images-q2a-tutorial?show=17523#q17523
