Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #166749

    Hi guys

    I’ve searched the forums and not found my question before.

    I’d like to use the Accordion slider, but not with the standard image sizes 700px X 320px

    I’d like to use something like 300x200px images, without them being stretched – is this possible ? (I don’t mind creating images to an exact size to fit the page or container widths as necessary, if this makes for a simpler code change).

    Thanks in advance for any guidance. :-)

    #166983

    Hi photoMaldives!

    It is a bit complicated but you resize the slider. Edit style.css, find this code:

    #featured, .featured, .fadeout, .newsselect{ 
    height:320px; 			/*this changes the height of the image slider*/
    }
    
    #feature_wrap{
    width:959px;
    position: relative;
    margin-left:20px;
    
    }
    
    #featured{
    position: relative;
    width:957px;
    overflow: hidden;
    }
    
    .featured{
    width:700px;
    position:absolute;
    top:0;
    left:0;
    overflow: hidden;
    display:none;
    }

    Replace it with:

    #featured, .featured, .fadeout, .newsselect{ 
    height:200px; 			/*this changes the height of the image slider*/
    }
    
    #feature_wrap{
    width:300px;
    position: relative;
    margin-left:20px;
    
    }
    
    #featured{
    position: relative;
    width:300px;
    overflow: hidden;
    }
    
    .featured{
    width:100px;
    position:absolute;
    top:0;
    left:0;
    overflow: hidden;
    display:none;
    }
    
    #top .feature_excerpt{
    width:660px;
    position: absolute;
    display: block;
    bottom: 0;
    left:0;
    z-index: 3;
    padding:10px 20px;
    font-size: 11.5px;
    line-height:1.5em;
    cursor: pointer;
    }

    Remove browser cache then reload the page.

    Best regards,
    Ismael

    #167094

    Hi Ismael

    Thanks for your quick reply – I didn’t realise that I could achieve this using CSS alone.

    But unfortunately your amended code doesn’t seem to have worked – I’m pretty sure I followed your instructions OK, but it breaks the slider. I can see a bordered outline of 300x200px, but no images are appearing at all. I tried adjusting the parameters using Firebug but wasn’t able to improve things.

    Is there anything else to try ?

    #168073

    Hi Ismael – yes, you’re correct – it is complicated ! I’ve been making a bit more progress with this, and I’m *almost* there now, so hoping you can help me some more. I applied your code, but the slider was not full width, and the images appeared distorted & zoomed in. So I added the following code, to make the individual images display at the correct 300×200 size, and also for the slider to be full width –

     #featured {width: 960px !important;}
    .featured img {height: 200px !important; width: 300px !important;}

    So it looks perfect at first, but then when the auto-slideshow starts, the animation is wrong, and when you hover, the slider closes rather than opens – you can see it here – http://seamarc.com/wpsea/

    Any help is much appreciated. :-)

    #168611

    Hello!

    I think this part of Ismaels code

    
    .featured{
    width:100px;
    position:absolute;
    top:0;
    left:0;
    overflow: hidden;
    display:none;
    }
    
    

    is not correct because the default slider uses 700px for a recommended image size of 700px. In your case the featured container width should probably be 300px

    
    .featured{
    width:300px;
    position:absolute;
    top:0;
    left:0;
    overflow: hidden;
    display:none;
    }
    

    If this doesn’t help please try to revert the css code changes and check which code breaks the animation.

    Regards,
    Peter

    #168666

    Thanks for your help, guys – that’s sorted it now. Great support. :-D

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Change size of Accordion Slider ?’ is closed to new replies.