ansaurus

Question

the number of item and viewing the problem with jquery

Answer 1

A:

i can understand the rationale for do not have someone who can give a simple example?

Metin METE 2010-07-24 08:25:46

Please add extra comments as edits to your question or comments on your question, rather than posting in the answers section.

Alex JL 2010-07-24 09:43:16

i'm sorry.. i'm new on the site too...

Metin METE 2010-07-24 10:25:46

Answer 2

A:

You mean like:

var yaziListeAktif = 0;
var yaziListe = $("ul");

function yaziListeAktifOlan () { 
    var children = yaziListeChildren();

    $("#yazi-toplam-sayi").text((yaziListeAktif + 1) + "/ " + children.length);

    return children.eq(yaziListeAktif);
};

function yaziListeChildren() {
     return yaziListe.children();   
}

yaziListeAktifOlan().fadeIn().siblings().hide();

$(".ileri").bind("click", function (e){
    if (++yaziListeAktif == yaziListeChildren().length) {
        yaziListeAktif = 0;   
    };

    event.preventDefault();
});

$(".geri").bind("click", function (e){
    if (yaziListeAktif-- == 0) {
        yaziListeAktif = yaziListeChildren().length - 1;   
    };

    event.preventDefault();    
});

$(".geri,.ileri").bind("click", function() {
    yaziListeAktifOlan().fadeIn().siblings().hide();
});

http://www.jsfiddle.net/ettUS/

Matt 2010-07-24 08:55:48

the next and prev buttons; "event.preventDefault();" delete the code, it worked... thanks mate.. how well is determined by the number of items? _e.g: 2 or 3 items etc._

Metin METE 2010-07-24 10:33:00

Answer 3

A:

How about something like this (interpretation based on images) -

(function ($) {
    $.fn.imageLister = function (options) {

        options = $.extend({
                                counter : '#counter',
                                prev: '#prev',
                                next: '#next'
                            }, options || {});


        return this.each(function (i, v) {
            var self = $(this),
                elems = self.find('li').hide(),
                num = elems.find('img').length,

                updateCounter = function() {
                    $(options.counter).text(self.find('img:visible').length + '/' + num);  
                };

                updateCounter();

            $(options.next).click(function(e) {
               e.preventDefault();
               var li = self.find('li'),
                   visible = li.filter(':visible'),
                   count = visible.length,
                   last = visible.last();

                (count)? last.next().fadeIn(updateCounter) : li.first().fadeIn(updateCounter);          
            });

            $(options.prev).click(function(e) {
               e.preventDefault();
               self.find('li:visible').last().fadeOut(updateCounter);
            });           
        });
    }

})(jQuery);

and to use

$(function () {
    $('ul').imageLister({ 
                            counter: '#yazi-toplam-sayi', 
                            next: 'a.ileri', 
                            prev: 'a.geri' 
                        });
});

Here's a Working Demo

Russ Cam 2010-07-24 09:39:18

i want to be like a slide but i want to switch two, three or four etc.

Metin METE 2010-07-24 10:00:01

you'll need to be more specific. Where do the images slide in from? Do they replace images that are there? How is the switching in of a number of images configured, is it random, is there a pattern? Are you trying to achieve something like this? http://jquery.malsup.com/cycle/

Russ Cam 2010-07-24 10:25:55

in fact, do not try to slide pictures. i've created a table for my web site. 10 articles listed in the table will make random. i want; first get 1-2 of them display in this list, then the "NEXT" button is clicked 3-4 display, then the "NEXT" button is clicked 5-6 display as... in this way, a cycle but i want to show the two (2) of them :/ and it was looking to cycle jquery plugin (: i want to do, i could not do it...

Metin METE 2010-07-24 11:36:03

Answer 4

A:

.slice(1)

code is only able to set the number of items displayed... mmm one jumping the counter :/ after, next or prev button is clicked!!! all function is applied to the bottom item, it does not change the top item :/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul { list-style:none; }
ul, li { margin:0; padding:0; }
</style>
</head>

<body>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var yaziListeAktif = 0;
    var yaziListe = $("ul");    
    function yaziListeAktifOlan () {
        var children = yaziListeToplamSayi();
        $("#yazi-toplam-sayi").text((yaziListeAktif + 1) + "/" + children.length);
        return children.eq(yaziListeAktif);
    };
function yaziListeToplamSayi() {
         return yaziListe.children();   
    }
    yaziListeAktifOlan().fadeIn().siblings().slice(1).hide();
    $(".ileri").bind("click", function (e){
        if (++yaziListeAktif == yaziListeToplamSayi().length) {
            yaziListeAktif = 0;   
        };
        return false;
    });
    $(".geri").bind("click", function (e){
        if (yaziListeAktif-- == 0) {
            yaziListeAktif = yaziListeToplamSayi().length - 1;   
        };
        return false;   
    });
    $(".geri,.ileri").bind("click", function() {
        yaziListeAktifOlan().fadeIn().siblings().slice(1).hide();
    });
});
</script>

<ul>
    <li><img src="1.jpg" alt="" /></li>
    <li><img src="2.jpg" alt="" /></li>
    <li><img src="3.jpg" alt="" /></li>
    <li><img src="4.jpg" alt="" /></li>
    <li><img src="5.jpg" alt="" /></li>
    <li><img src="6.jpg" alt="" /></li>
    <li><img src="7.jpg" alt="" /></li>
    <li><img src="8.jpg" alt="" /></li>
    <li><img src="9.jpg" alt="" /></li>
    <li><img src="10.jpg" alt="" /></li>
</ul>

<div id="yazi-toplam-sayi"></div>

<a href="#" class="geri">geri</a>
<a href="#" class="ileri">ileri</a>

</body>
</html>

i'm trying but i can't do...

Metin METE 2010-07-25 09:28:24

ansaurus

tags:

views:

answers:

the number of item and viewing the problem with jquery

related questions