WordPress.org

Forums

Slideshow
[resolved] Slideshow disappears when max width set - examples (6 posts)

  1. julievetter
    Member
    Posted 2 years ago #

    Hi, first, thank you for this great plugin. I donated as soon as I saw how flexible and easy it was and hope everyone donates who uses it. Second, thank you for being so generous and kind with your responses in the WP forum.

    I am upgrading an old site. Portfolio pages have a background, text on the left and a slideshow on the right. Here is the old site: http://cecileh.com/?lang=en

    Issues: 1) Adding a width makes slideshow vanish. 2) Slideshow appears to low and then jumps to right position 3) Trying to anticipate best way to add a "next look" button below slideshow, which is part of background for now.

    1) Fixing the slideshow to a location and size (417h x 347w). When I add a width it vanishes, but if I don't, it gets too big.
    Here is no width set and then width set:
    http://parislasamaritaine.com/ch/portfolio-catherinec/
    http://parislasamaritaine.com/ch/portfolio/ (disappears)

    2) The slideshow appears lower at first with the bottom cut off and then adjusts to the right position with second slide. Same on home page.

    3) I have to turn the "next relook" into a button and any experienced suggestion on how to position this below the slideshow is appreciated.

    I am using Atahualpa for the theme, WPML for the translations and not much else.

    Here is the code for the portfolio pages:

    <div style="background-image: url('http://parislasamaritaine.com/ch/wp-content/uploads/2013/04/lookbook.png'); background-repeat: no-repeat; margin: 0 0 0 40px; height: 700px; width: 965px;"><div id="avantaprestext" style="float:left">
    <h2>New look for Marie-Hélène!</h2>
    <p>Challenge: No longer satisfied with her look and ready to take it up a notch.</p>
    <p>We started this makeover with a visit to the salon for a fresh look for Marie-Helene based on an initial color and shape analysis. Next was shopping, planned around a predetermined budget and a brand new way of making choices to reflect a more confident attitude. Our consultation and advice established an increased ease in building a wardrobe that will reflect well on Marie-Hélène.</p>
    <p>Result: Increased daring and greater freedom of expression.</p></div>
    [slideshow_deploy id='227']</div>

    http://wordpress.org/extend/plugins/slideshow-jquery-image-gallery/

  2. Stefan Boonstra
    Member
    Plugin Author

    Posted 2 years ago #

    Hi Julie,

    Thank you for the compliment and your most generous donation!

    I see you've added a style rule to the custom stylesheet that's applied to the slideshow. The 'margin-right: 220px;' value causes every element in the slideshow to be a bit smaller. As the maximum width of the slideshow is set to be just about 100 pixels wider, the images won't be visible.

    The best thing to do, would probably be to delete this line from the custom stylesheet:

    .slideshow_container div {margin-left:0px;top:50px;margin-right:220px;}

    To make the slideshow align next to the text, you should add something like this to the '.slideshow_container { }' class:

    .slideshow_container {
        float: left; /* Aligns the slideshow next to the text block. */
        margin: 80px 0 0 80px; /* This sets the top and left margin to 80 pixels, so the image is aligned neatly. Of course you can change these values in any way you like. */
    }

    I'll answer question three in a couple of minutes.

    Best regards,
    Stefan

  3. Stefan Boonstra
    Member
    Plugin Author

    Posted 2 years ago #

    Hi Julie,

    As promised, here's what you could do to position a 'Next relook' button below the slideshow. In this example I've placed the button right over the image.

    <a href="#" style="display: block; background: #fff; position: absolute; top: 750px; left: 950px;">
    	Next relook
    </a>

    It will probably work best if you add this piece of code right after this line of HTML code (the first line of code you put in your code):

    <div style="background-image: url('http://parislasamaritaine.com/ch/wp-content/uploads/2013/04/lookbook.png'); background-repeat: no-repeat; margin: 0 0 0 40px; height: 700px; width: 965px;">

    Best regards,
    Stefan

  4. julievetter
    Member
    Posted 2 years ago #

    Problems all solved. Thank you for your help!

  5. julievetter
    Member
    Posted 2 years ago #

    Topic resolved.

  6. Stefan Boonstra
    Member
    Plugin Author

    Posted 2 years ago #

    That's great to hear, you're very welcome!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Slideshow
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic