Panel
Fighter
webmaster
0 votes
Discus 140 views

Degradation of resized image

This is a issue on mobile device. Attached images are reduced in accordance with horizontal size of affiliation block in base theme. Especially in chrome it seems deterioration of the image is intense.

Stylesheet code

.qa-content img {
    max-width: 99%;
    height: auto !important;
}

Sample image

  • Real width is 705px
  • Reduced width is 600px (by PQA core [CKEditor uploader])
  • Please check with a smaller screen.

Related thread

What do you think about this? In particular, I'm worry about retina display on smart phone.

image

by webmaster asked Oct 21, 2015 in Others
by webmaster edited Oct 21, 2015

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Expert
Vanbells
+2 votes
 
Best answer
+5

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

by Vanbells answered Oct 21, 2015
by webmaster selected Oct 22, 2015

2 Comments

Oh, I forgot LightBox. Your advice is always accurate. I would add "Responsive (Mobile friendly) Lightbox" to PQA core.

Parts candidate:
SwipeBox [No license, SASS]
http://brutaldesign.github.io/swipebox/
Magnific Popup [MIT, SASS] ** This is used my Extra Question Field plugin **
http://dimsemenov.com/plugins/magnific-popup/
PhotoSwipe [MIT, SASS]
http://photoswipe.com/
Fluidbox [MIT, SASS] ** So cool and simple! **
http://terrymun.github.io/Fluidbox

Please log in or register to add a comment.

Welcome to PowerQA. PowerQA is a new discussion software (not OSS). Here is a community for PowerQA developers. Current stable version is V1.9.4. It is enhanced day by day.

Followers

1 users followed

Statistics

  • 338 questions
  • 276 answers
  • 480 comments
  • 100 users

Post types

...