applying my own next/prev buttons instead of existing ones

sido74 commented 12 years ago

I cant seem to figure out how to apply my own next/prev buttons instead of the existing ones. I could see this may have already been answered but I cant seem to figure it out. Im fairly new to all this so any help with is issue would be greatly appreciated.

Thanks

Mottie commented 12 years ago

Hi sido74!

Check out this demo from the wiki home page

sido74 commented 12 years ago

Yea thats what im after but where/how do i put my own png images instead of those default ones? and also which js section does that code go into?

Mottie commented 12 years ago

You can replace the <button> with a link + image or just an image, or add a background image to an element using css. The element you click on to change the panel doesn't matter as long as you replace $('button') with the class name of that element.

For example, if you add a link + image, your html will look something like this:

<a class="prev"><img src="prev.png"></a>
<a class="next"><img src="next.png"></a>

then you'd have to modify the js to look like this (including wrapping it in a document ready function). It goes into the <head> of your document.

<script>
jQuery(function($){

    $('#slider').movingBoxes();

    $('.next, .prev').click(function(){
        var slider = $('#slider').data('movingBoxes'),
            target = slider.curPanel += ($(this).hasClass('next')) ? 1 : -1;
        // change to panel #
        slider.change(target);
        return false;
    });

});
</script>

sido74 commented 12 years ago

does the script go into my html page? or does it go into one of the 4 js files?

sido74 commented 12 years ago

and is there any other things I need to change or other dependent code? because I cant seem to get it working.

thanks

Mottie commented 12 years ago

If you put that code above into an external js file, remove the <script></script> tags. If you add it to the HTML page, add it as you see above. But make sure it is added after the depended code (see below) is loaded.

The only dependent code is jQuery and the MovingBoxes js file.

sido74 commented 12 years ago

In the download pack there are 3 js files in the folder, I assume you mean the jquery.movingboxes.js file? if so i have changed the name of this and would that explain why it isnt working? and would the code above need to be changed in order for it work? because as it stands ive done as youve sed and all i get is my next/prev buttons in the corner but they do nothing.

Sorry for all the questions, im jst realy new to this and really wana have this slider work. All your help is much appreciated.

Mottie commented 12 years ago

How about making it easier on me and share the code that you are using. It is much easier to troubleshoot by seeing the problem than guessing at what might be wrong.

sido74 commented 12 years ago

cool thanks, heres what ive got

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Moving Boxes</title>

    <!-- Required CSS -->
    <link href="home slider/home.slider.css" media="screen" rel="stylesheet">
    <!--[if lt IE 9]>
    <link href="css/movingboxes-ie.css" rel="stylesheet" media="screen" />
    <![endif]-->

    <!-- Required script -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="home slider/js/home.jquery.movingboxes.js"></script>
    <script src="home slider/js/home.jquery.easing.1.2.js"></script>
        <script src="home slider/js/home.jquery.movingboxes.min.js"></script>

    <!-- Demo only -->
    <link href="home slider/home.demo.css" media="screen" rel="stylesheet">
    <script src="home slider/home.demo.js"></script>
    <style>
        /* Overall & panel width defined using css in MovingBoxes version 2.2.2+ */
        ul#slider-one { width: 700px; }
        ul#slider-one > li { width: 300px; }
        div#slider-two { width: 800px; }
        div#slider-two > div { width: 360px; }
    </style>

</head>

<script>
jQuery(function($){

    $('#slider').homr.jquery.movingBoxes();

    $('.next, .prev').click(function(){
        var slider = $('#slider').data('movingBoxes'),
            target = slider.curPanel += ($(this).hasClass('next')) ? 1 : -1;
        // change to panel #
        slider.change(target);
    });

});
</script>

<a class="prev"><img src="prev.png"></a>
<a class="next"><img src="next.png"></a>

<body>

<div id="header"><img src="sd logo.jpg" width="300" height="150" /> </div>
<div id="navigation">
    <a href="portfolio.html" class="button2">about</a>
    <a href="portfolio.html" class="button2">portfolio</a>
    <a href="portfolio.html" class="button3">contact</a>

</div>

    <!-- Slider #1 -->
    <ul id="slider-one">

        <li>
            <img src="../../Desktop/sd site/thumb1.jpg" alt="picture">

        </li>

        <li>
            <img src="../../Desktop/sd site/thumb1.jpg" alt="picture">

        </li>

        <li>
            <img src="../../Desktop/sd site/thumb1.jpg" alt="picture">

        </li>

        <li>
            <img src="../../Desktop/sd site/thumb1.jpg" alt="picture">

        </li>

        <li>
            <img src="../../Desktop/sd site/thumb1.jpg" alt="picture">

        </li>

        <li>
            <img src="../../Desktop/sd site/thumb1.jpg" alt="picture">

        </li>

        <li>
            <img src="../../Desktop/sd site/thumb1.jpg" alt="picture">

        </li>

    </ul> <!-- end Slider #1 -->

</div> <!-- end wrapper -->

</body>
</html>

sido74 commented 12 years ago

same again, hope this makes sense

Mottie commented 12 years ago

It looks like a lot of the urls are wrong... this is definitely not going to find the file:

<script src="home slider/js/home.jquery.movingboxes.js"></script>

Is "home slider" a directory? Make sure all of the urls are encoded, so if the directory really is "home slider" then it would become encoded to "home%20slider" or "sd%20site" for your images.

To make double sure the files are being loaded, press f12 in your browser and check the resources (easiest to do in Chrome).

sido74 commented 12 years ago

i see, I think what would be an easier solution is if i start again, if it would be possible for you to send the html of the original slider but with code amended with additional next prev button, then i can just re do my changes and that would ensure that the code works otherwise i feel this may b a bit to hard to sort going back and forth. I suggest this aswell because i redownloaded the original files and added the code and didnt work either.

Mottie commented 12 years ago

Try this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Moving Boxes</title>

    <!-- Required CSS -->
    <link href="css/movingboxes.css" media="screen" rel="stylesheet">
    <!--[if lt IE 9]>
    <link href="css/movingboxes-ie.css" rel="stylesheet" media="screen" />
    <![endif]-->

    <!-- Required script -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="js/jquery.movingboxes.js"></script>

    <!-- Demo only -->
    <style>
        /* Dimensions set via css in MovingBoxes version 2.2.2+ */
        #slider { width: 500px; }
        #slider li { width: 250px; }

        #wrapper { margin-top: 50px; }
        .button-wrap { text-align: center; }
        .next, .prev { cursor: pointer; }
        h2, p { margin: 5px; }
    </style>
    <script>
    $(window).load(function(){
        $('#slider').movingBoxes({
            startPanel   : 1,      // start with this panel
            wrap         : false,   // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
            buildNav     : true,   // if true, navigation links will be added
            navFormatter : function(){ return "&#9679;"; } // function which returns the navigation text for each panel
        });

        $('.next, .prev').click(function(){
            var slider = $('#slider').data('movingBoxes'),
            target = slider.curPanel += ($(this).hasClass('next')) ? 1 : -1;
            // change to panel #
            slider.change(target);
            return false;
        });

    });
    </script>
</head>
<body>

<div id="wrapper">

    <!-- MovingBoxes Slider -->
    <ul id="slider">

        <li>
            <img src="http://chriscoyier.github.com/MovingBoxes/demo/1.jpg" alt="picture" />
            <h2>Olivia News Heading</h2>
            <p>A very short exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
        </li>

        <li>
            <img src="http://chriscoyier.github.com/MovingBoxes/demo/2.jpg" alt="picture" />
            <h2>Alice News Heading</h2>
            <p>A very short exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
        </li>

        <li>
            <img src="http://chriscoyier.github.com/MovingBoxes/demo/3.jpg" alt="picture" />
            <h2>Yin News Heading</h2>
            <p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
        </li>

        <li>
            <img src="http://chriscoyier.github.com/MovingBoxes/demo/4.jpg" alt="picture" />
            <h2>Gerri News Heading</h2>
            <p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
        </li>

        <li>
            <img src="http://chriscoyier.github.com/MovingBoxes/demo/5.jpg" alt="picture" />
            <h2>Tabitha News Heading</h2>
            <p>A very short exerpt goes here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a></p>
        </li>

        <li>
            <img src="http://chriscoyier.github.com/MovingBoxes/demo/6.jpg" alt="picture" />
            <h2>Mary News Heading</h2>
            <p>A very short exerpt goes here... <a href="#">more</a></p>
        </li>

        <li>
            <img src="http://chriscoyier.github.com/MovingBoxes/demo/7.jpg" alt="picture" />
            <h2>Kitty News Heading</h2>
            <p>A very short exerpt goes here... <a href="#">more</a></p>
        </li>

    </ul> <!-- end Slider #1 -->

    <div class="button-wrap">
        <a class="prev" href="#">&lt;&lt; prev</a>
        <a class="next" href="#">next &gt;&gt;</a>
    </div>

</div> <!-- end wrapper -->

</body>
</html>

sido74 commented 12 years ago

YEAAAA it works, cheers mate, thats been a big help. Thanks for your time and help

Mottie commented 12 years ago

You're welcome.

sido74 commented 12 years ago

umm really sorry to bring this back up but with the code you gave me I cant get the images to go central, it doesnt seem to function like the original nav bars.

Mottie commented 12 years ago

Do me a favor, send me the code you are using via email, my gmail account name is wowmotty. We can continue this via email; the plugin issues are really meant for plugin bugs or enhancement requests.

sido74 commented 12 years ago

did you receive my email?

CSS-Tricks / MovingBoxes

applying my own next/prev buttons instead of existing ones #90