WordPress.org

Ready to get started?Download WordPress

Forums

WP Parallax Content Slider
[resolved] Use Featured Image as background? (10 posts)

  1. streetcore
    Member
    Posted 1 year ago #

    This plug-in looks great, but I really wish there was a way to use a post's featured image for the background.

    I don't see this as an option so I was playing with the css and trying to make the feature image bigger and change it's position. However, I wasn't having much luck.

    Any suggestions?

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

  2. wp-maverick
    Member
    Plugin Author

    Posted 1 year ago #

    Hi streetcore,
    your suggestion will be a good option but it will require a serious refactoring of my code.
    Since I don't have much time to spent on this side project, I will focus on other developments like new parallax transitions, graphical themes, etc.
    However, maybe if I find a good idea to implement it quicly, I will think about it.
    Regards ;)

  3. sylwiaofwarsaw
    Member
    Posted 1 year ago #

    I'd love to have this option too. Have you thought of some way to implement it?

    Great plugin!

    Regards,

    Sylwia

  4. wp-maverick
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Sylwia,
    not yet unfortunately but since streetcore asked me for this, I've packaged another WP slider plugin which uses the featured image for the slides' background!

    I'll try to add this feature in the wp-parallax-slider-plugin ASAP.

    The other plugin is called wp-fading-content-slider and is waiting for approval by the wordpress team. You can see it in action here: http://blog.mba-multimedia.com/

  5. sylwiaofwarsaw
    Member
    Posted 1 year ago #

    I like your new slider very much, but the wp-parallax-slider-plugin is perfect for my site. I'll wait for the update.

    Thanks a lot!

    Regards,

    Sylwia

  6. Phoelid
    Member
    Posted 1 year ago #

    Hi,

    I needed the functionality for myself and I found out how to do it after a few hours.

    To make the Featured Image as background, find the code:

    // Slide output
    		$outputSlide  = "<div class='da-slide'>"."\n";

    and replace

    $outputSlide  = "<div class='da-slide'>"."\n";

    with

    $outputSlide  = "<div class='da-slide' style='background:url($url_image) repeat fixed; background-size:cover;'>"."\n";

    You're welcome. :)

  7. wp-maverick
    Member
    Plugin Author

    Posted 1 year ago #

    Great Phoelid! Nice work

  8. vbk100
    Member
    Posted 1 year ago #

    Phoelid,

    Great workaround for the background. But I would like to know what happens to the current object(featured image showing as the image at left side).

    Hope that remains intact with a custom field or another option to add another image

    Thanks!

  9. Phoelid
    Member
    Posted 1 year ago #

    I've found out, that with this workaround you need to change the code by a huge bite. I'm not a jQuery master myself and can't really do it, though I know what IS needed to make it work right.

    There are a few problems with this change.
    First, you can't set the Parallax. It's always set on same fixed amount, not changable by any means.
    Second, I few CSS changes too that I required. The problem: without those css changes it'd look really messy and it also requires a jQuery change.

    /* Animation classes and animations */
    
    /* Slide in from the right*/
    .da-slide-fromright {
    	-webkit-animation: fromRightAnim1 1s ease-in 0.4s both;
    	-moz-animation: fromRightAnim1 1s ease-in 0.4s both;
    	-o-animation: fromRightAnim1 1s ease-in 0.4s both;
    	-ms-animation: fromRightAnim1 1s ease-in 0.4s both;
    	animation: fromRightAnim1 1s ease-in 0.4s both;
    }
    @-webkit-keyframes fromRightAnim1{
    	0%{ left: 100%; opacity: 0; }
    	100%{ left: 0%; opacity: 1; }
    }
    @-moz-keyframes fromRightAnim1{
    	0%{ left: 100%; opacity: 0; }
    	100%{ left: 0%; opacity: 1; }
    }
    
    @-o-keyframes fromRightAnim1{
    	0%{ left: 100%; opacity: 0; }
    	100%{ left: 0%; opacity: 1; }
    }
    @-ms-keyframes fromRightAnim1{
    	0%{ left: 100%; opacity: 0; }
    	100%{ left: 0%; opacity: 1; }
    }
    @keyframes fromRightAnim1{
    	0%{ left: 100%; opacity: 0; }
    	100%{ left: 0%; opacity: 1; }
    }
    /* Slide in from the left*/
    .da-slide-fromleft {
    	-webkit-animation: fromLeftAnim1 1s ease-in 0.4s both;
    	-moz-animation: fromLeftAnim1 1s ease-in 0.4s both;
    	-o-animation: fromLeftAnim1 1s ease-in 0.4s both;
    	-ms-animation: fromLeftAnim1 1s ease-in 0.4s both;
    	animation: fromLeftAnim1 1s ease-in 0.4s both;
    }
    @-webkit-keyframes fromLeftAnim1{
    	0%{ left: -100%; opacity: 0; }
    	100%{ left: 0%; opacity: 1; }
    }
    
    @-moz-keyframes fromLeftAnim1{
    	0%{ left: -100%; opacity: 0; }
    	100%{ left: 0%; opacity: 1; }
    }
    @-o-keyframes fromLeftAnim1{
    	0%{ left: -100%; opacity: 0; }
    	100%{ left: 0%; opacity: 1; }
    }
    @-ms-keyframes fromLeftAnim1{
    	0%{ left: -100%; opacity: 0; }
    	100%{ left: 0%; opacity: 1; }
    }
    @keyframes fromLeftAnim1{
    	0%{ left: -100%; opacity: 0; }
    	100%{ left: 0%; opacity: 1; }
    }
    /* Slide out to the right */
    .da-slide-toright {
    	-webkit-animation: toRightAnim1 1s ease-in   both;
    	-moz-animation: toRightAnim1 1s ease-in  both;
    	-o-animation: toRightAnim1 1s ease-in  both;
    	-ms-animation: toRightAnim1 1s ease-in  both;
    	animation: toRightAnim1 1s ease-in  both;
    }
    
    @-webkit-keyframes toRightAnim1{
    	0%{ left: 0%;  opacity: 1; }
    	100%{ left: 100%; opacity: 0!important; }
    }
    
    @-moz-keyframes toRightAnim1{
    	0%{ left: 0%;  opacity: 1; }
    	100%{ left: 100%; opacity: 0; }
    }
    @-o-keyframes toRightAnim1{
    	0%{ left: 0%;  opacity: 1; }
    	100%{ left: 100%; opacity: 0; }
    }
    
    @-ms-keyframes toRightAnim1{
    	0%{ left: 0%;  opacity: 1; }
    	100%{ left: 100%; opacity: 0; }
    }
    
    @keyframes toRightAnim1{
    	0%{ left: 0%;  opacity: 1; }
    	100%{ left: 100%; opacity: 0; }
    }
    /* Slide out to the left*/
    .da-slide-toleft {
    	-webkit-animation: toLeftAnim1 1s ease-in  both;
    	-moz-animation: toLeftAnim1 1s ease-in  both;
    	-o-animation: toLeftAnim1 1s ease-in  both;
    	-ms-animation: toLeftAnim1 1s ease-in  both;
    	animation: toLeftAnim1 1s ease-in  both;
    }
    @-webkit-keyframes toLeftAnim1{
    	0%{ left: 0%;  opacity: 1; }
    	100%{ left: -100%; opacity: 0; }
    }
    @-moz-keyframes toLeftAnim1{
    	0%{ left: 0%;  opacity: 1; }
    	100%{ left: -100%; opacity: 0; }
    }
    @-o-keyframes toLeftAnim1{
    	0%{ left: 0%;  opacity: 1; }
    	100%{ left: -100%; opacity: 0; }
    }
    @-ms-keyframes toLeftAnim1{
    	0%{ left: 0%;  opacity: 1; }
    	100%{ left: -100%; opacity: 0; }
    }
    
    @keyframes toLeftAnim1{
    	0%{ left: 0%;  opacity: 1; }
    	100%{ left: -100%; opacity: 0; }
    }

    That's what's left of my animation code. Now it looks pretty cool as a slider, uh?
    There's a huge problem though: To make it look GOOD you need to either set 'da-slide-toright' or 'da-slide-toleft' class or each slide except current, or stick up with two slides, or else it gets messy, buggy and while changing slide, you'll eventually have another background for a second or two.

    I've been trying to work it out, though I'm having so much work on my hands that I have no idea how to change the bug in jquery.

    vbk100, just get rid of

    $outputSlide .= "<div class='da-img'><img src='".$url_image."' alt='".$alt_image."' /></div>"."\n";

    it should work. That's really just a workaround 'till wp-maverick does something better than this. :)

  10. vbk100
    Member
    Posted 1 year ago #

    Thank you, will give it a try

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.