[Plugin: Before After] Issues with image display

Hi,

I just found that the image loading still has some problem in safari and chrome. When you load the images for the first time, the images do not show up, but from second time on it works fine. Could you look into this problem? Thank you so much!

Yingying

By First time do you mean first time you look in those browsers or first time after publishing images

Can you point me to your site?

and also let me know what version of the plugin you are using?

Thanks,
instruite

It happens when I open the page in the browsers, but when I click the links to the page for the second time, the images show up. One of the pages is https://designracy.com/2011/case-study-fashionplates/; I also use the plugin in https://designracy.com/2011/case-study-light-crest/ and https://designracy.com/2011/case-study-gaia/.

p.s. I don’t think refreshing the browser works, you have to click the link on the right side to reload the page.

Which version of Chrome you are using?

Have pushed a update 0.1.4
Please test with the new version and let me know

Thanks
instruite

plugin is throwing this error now:
Warning: strpos() [function.strpos]: Offset not contained in string. In /wp-content/plugins/before-after.php on line 173

@niffur

Fixed the bug causing that error please update to V0.1.5

@mycelestial
Can you share the code between before after tags on your edit post page? (better if you paste from html view)

And most probably your image code will be having a class tag with something like “size-full/size-medium or something similar in class tag” can you remove that from your code and test it on your page and see if it resolves the chrome problem on your site?

Thanks

Hey Thank you Instruite,

I’ve been out of town for a long time so below is the reply:

Yes I had size-full in my tags, and they look like this:

<p><strong>Logo</strong> (before and after)</p>
<p>[beforeafter]<img class="alignleft size-full wp-image-1145" title="FP_logo_before" src="https://designers4change.com/wp/wp-content/uploads/2011/03/FP_logo_before.jpg" alt="" width="636" height="313" /><img class="alignright size-full wp-image-1144" title="FP_logo_after" src="https://designers4change.com/wp/wp-content/uploads/2011/03/FP_logo_after.jpg" alt="" width="636" height="313" />[/beforeafter]</p>

I just updated my chrome (PC) this afternoon and it looks okay now. I believe the newer version fixed the problem… But I found the same in my Safari 5.0.4 (PC) even after I removed the size-full tag:

<p><strong>Logo</strong> (before and after)</p>
<p>[beforeafter]<img class="alignleft wp-image-1145" title="FP_logo_before" src="https://designers4change.com/wp/wp-content/uploads/2011/03/FP_logo_before.jpg" alt="" width="636" height="313" /><img class="alignright wp-image-1144" title="FP_logo_after" src="https://designers4change.com/wp/wp-content/uploads/2011/03/FP_logo_after.jpg" alt="" width="636" height="313" />[/beforeafter]</p>

I have tried few other options but the problem still seems to persists in Safari and sometime in Chrome too

For now it seems to be a bug, I will try other options and let you know if I find any suitable solution in future

Thanks

I have updated the plugin, and provided an option to auto detect dimensions which should help to solve the problem with Chrome or Safari

Upgrade it on your blog and let me know the results

Hi There,

I’d like to say thanks for developing such a great plugin.

I’ve recently come across a problem with the way before and after now displays the images (it seemed to happen with the last update).

The two images no longer align over eath other exactly so you get the top image being offset from the one bellow.

I’ve tried alligning the second image (right/centre/none)with no joy each just alters the degree that it is offset by, the option with the least offset is for the second image to be aligned right but thats still not matching up exactly.

Here is a link to relevent page on my site, (I am currently running WP v3.2.1, B&A v1.01 and mystique theme v3.0.7)

https://www.blayn-parkinson.co.uk/blog/services/retouch/

Cheers for all your good efforts and any advice you can offer.

Blayn

Hi Blayn,

Its because of the css settings
Enable custom css in Before after option page
and add below css to the cusom css box

.ba-container {margin-left:auto; margin-right:auto;}
.ba-container + div.balinks {margin: 0 auto;}
.ba-container div img {max-width: none; margin:0; padding:0;}

Also the script does not seems to be loading all the parameters so I will recommend you to once deactivate and then reactivate the before after plugin

instruite

Cheers for the prompt reply, I’ll have a crack at this and let you know it goes.

Thanks,

B

Magic!, it works a treat. Thanks again ??

B