show/hide

[Allie_P]

Thanks. May I ask what the issue was?

Next step would be to add the image slider. Would you recommend a specific set up? I mean, I think I can do it on my own, I just don’t wanna take a route that could potentially make it harder to implement the other features down the road.

It doesn’t have to be anything fancy. A simple caption for each slide and prev/next buttons is fine. Just like what we talked initially.

[Shikkediel]

It was still referring to the buttons for ordered and random layout which aren’t present. This created errors, one could see them in the developer tools console. Plus you copied the script twice…

If you create the basic HTML markup, I’ll write a bit of code for a slider effect. Could be a simple as you like. Don’t think you need a plugin for the JS then.

[Allie_P]

I could use this one, couldn’t I?

[Shikkediel]

There’s about a million options for a slider out there but I would personally not use any of them for just a previous and next button. All else only bloats your code and will slow down the website. It’ll also make make it hard for myself to help you out if anything’s not working right with it.

The basic markup would only need parents (that are already there) with child elements that are all hidden but one. A minor amount of code is then needed to add the desired functionality you described.

[Allie_P]

Something like this?

<div class="widget widget-20">

    <div id="widget-20-title" class="widget-title">AAPL Apple</div>
    <div id="widget-20-hide" class="widget-hide">close</div>

    <div class="sliderWrapper">
        <div id="image_slider">
            <div><img src="images/image1.jpg"></div>
            <div><img src="images/image2.jpg"></div>
            <div><img src="images/image3.jpg"></div>
            <div><img src="images/image4.jpg"></div>
        </div>

    <div id="caption"></div>

        <div class="controls">
            <span id="prev">PREV</span>
            <span id="next">NEXT</span>
        </div>
    </div>

</div>

Like you’ve said, there’s about a million options. I’m getting kinda lost… :(

[Shikkediel]

I wouldn’t look any further anyway. I can work with the above. Gimme a bit and I’ll have a go to add the next step.

Edit – Update

[Allie_P]

Thanks, works great, except it’s missing the captions.
PREV/NEXT should be both on the right side with the caption on the left.

[Shikkediel]

What are the captions for exactly then – aren’t they for the individual images?

[Allie_P]

They are. Each image should have its own caption.

[Shikkediel]

In that case it was misplaced anyway. Already took something like that into account by keeping the wrapper divs around the images. You could add individual captions or pseudo elements to these divs without that interfering with the script.

:-)

[Allie_P]

OK, I think I get it. I’m gonna give it a try.
Would it be possible to soften the transitions? I mean, having the images fade out/in just a little bit… Don’t do it, just let me know how easy (or not) that would be. ;)

[Shikkediel]

Fades should be easy enough. A cross fade’s a bit harder because of the positioning but shouldn’t be much of an issue either.

[Allie_P]

This behavior. You click NEXT and the current image fades out and (only then) the next one fades in. If it’s too complicated, just forget about it.

[Shikkediel]

Done, have a look at the pen I made earlier…

[Allie_P]

Thanks, it looks great.
The next step is for me to add the captions and do some styling.

By the way, it’s possible to choose some of the widgets to be open by default (on load) and others to be closed (docked), right? I forgot to mention it before, but that’s kinda crucial to the whole thing.

[Author]

Posts