• Resolved controlb

    (@controlb)


    I worked out how to move the image to the left and the text to the right:

    .da-slide-current h2, .da-slide-current p, .da-slide-current .da-link {left: 40%}
    .da-slide .da-img { top: 15px; text-align:inherit; width:auto; height: 250px; left: 15%;}

    However, the image and text swap back to their default positions as soon as the slide animation begins. Is there any way of avoiding this?

    http://wordpress.org/extend/plugins/wp-parallax-content-slider/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter controlb

    (@controlb)

    Welcome back, Julien! Could I get a reply to the above, please?

    Plugin Author wp-maverick

    (@wp-maverick)

    Hi controlb,
    You shoud better try to change the CSS animations to do that.
    See styles.css.
    Y can see 2 types of animations:

    • ‘toLeftAnimX’ or ‘toRightAnimX’: animations for content leaving the page
    • ‘fromLeftAnimX’ or ‘fromRightAnimX’: animations for content entering the page

    They consist of values at the beginning (0%) of the animation and values at the end of the animations (100%): opacity and position

    Just try to invert these values and let me know if it works better.

    Thread Starter controlb

    (@controlb)

    Inverting the values doesn’t seem to alter the initial positions of the text and the images before or after the animation begins. Could a left/right option be put in the admin?

    Plugin Author wp-maverick

    (@wp-maverick)

    Hi controlb,
    and thanks a lot for your contribution to this support thread, that’s very helpful!!!

    As I’ve already said on my bebsite, almost everything is possible with CSS but the problem here is you’ll have to change also all the animations.

    As soon as an animation begins, even if you’ve moved the images and texts in the slides, their positions are re-evaluated and that’s the reason why you see this reverted effect… So basically, I think you have to re-think the CSS entirely.

    A solution would be to let the user choose between two CSS stylesheets but I’ve decided to keep things simple in the admin panel because everyone will have specific display needs and it’s impossible to manage all the CSS properties dynamically.

    I know this plugin can be improved and I’ve a lot of things in my TODO list but unfortunately I don’ have much time to develop them.

    If someday you write this alternate CSS stylesheet, feel free to share it with me and I could add it to the plugin 🙂

    Regards 😉

    Thread Starter controlb

    (@controlb)

    Finally worked it out!

    I swapped all instances of the da-img animation number (e.g. ‘4’ in ‘fromRightAnim4’) for the h2 and p ones. (I don’t use .da-link so that doesn’t feature in the solution.)

    So for example, this:

    .da-slide-fromright h2{
    	-webkit-animation: fromRightAnim1 0.6s ease-in 0.8s both; ...
    
    .da-slide-fromright p{
    	-webkit-animation: fromRightAnim2 0.6s ease-in 0.8s both; ...
    
    .da-slide-fromright .da-img{
    	-webkit-animation: fromRightAnim4 0.6s ease-in 0.8s both; ...

    becomes this:

    .da-slide-fromright h2{
    	-webkit-animation: fromRightAnim4 0.6s ease-in 0.8s both; ...
    
    .da-slide-fromright p{
    	-webkit-animation: fromRightAnim4 0.6s ease-in 0.8s both; ...
    
    .da-slide-fromright .da-img{
    	-webkit-animation: fromRightAnim1 0.6s ease-in 0.8s both; ...

    I also changed all the 60% values to 40%, but that was pretty much it.

    I’ve posted the full CSS up at http://shorttext.com/QJ52sSlsoCFXnoA for you to check out. Notice I tagged up all the original values too – I took a bunch of wrong turns before I got there.

    Plugin Author wp-maverick

    (@wp-maverick)

    Great work 🙂
    I’ll test that and maybe add it to the plugin.

    Hi controlb,

    Thanks a lot man, i was worried about this image and text swapping for the slider and you just saved my day.

    Thank you sooooo much.

    Chand.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Swapping Image and Text Around’ is closed to new replies.