0

index.php file

<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        vertical: true,
        scroll: 3,
    visible: 12
    });
});
</script>

<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
  <li>I love you haha.</li>
  <li>I love you haha.</li>
  <li>I love you haha.</li>
</ul>

---------------------------------------------------------------------------
From the above code, I use firebug to inspect the 3 <li>, each of them has the following properties :

<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical" style="float: left; list-style: none outside none; height: 19px;" jcarouselindex="1">I love you haha.</li>

<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-2 jcarousel-item-2-vertical" style="float: left; list-style: none outside none; height: 59px;" jcarouselindex="2">I love you haha.</li>

<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-3 jcarousel-item-3-vertical" style="float: left; list-style: none outside none; height: 99px;" jcarouselindex="3">I love you haha.</li>

So we know that the functions inside jcarousel.min.js file is assign those class, style and jcarouselindex to the <li>.[

-----------------------------------------------------------------------------
Now I need to dynamic get <li> from a php file.
usermessage.php file

echo "<li>I love you. Haha.</li>";
echo "<li>I love you. Haha.</li>";
echo "<li>I love you. Haha.</li>";

------------------------------------------------------------------------------
Then I added the following codes onto previous index.php file :

<?php $username1"=zac1987"; ?>
<script type="text/javascript">
function goer() {
var str="<?php echo $username1; ?>";
if (str=="")
  {
  document.getElementById("mycarousel").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("mycarousel").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","usermessage.php?username="+str,true);
xmlhttp.send();
}

goer();
</script>

When index.php is loaded, it will call javascript function goer() to get the 3 <li> from usermessage.php file.

------------------------------------------------------------------------------
Now I use firebug to inspect the 3 <li> again, then I realize the 3 <li> don't have class, style and jcarouselindex anymore. I guess it is because the function inside jcarousel.min.js file is execute first before the 3 <li> are finish sent from usermessage.php file. How to stop jcarousel funtion before 3 <li> is finish loaded? I saw there is an example of the way to stop jcarousel function but it is for xml data, I don't know how to convert it to php. I hope somebody can help me out about this. Below is the example of the way to stop jcarousel function but it is for xml data :

<script type="text/javascript">
function mycarousel_initCallback(carousel, state)
{
    // Lock until all items are loaded. That prevents jCarousel from
    // setup correctly and we have to do that in the ajax callback
    // function with carousel.setup().
    // We're doing that because we don't know the exact height of each
    // items until they are added to the list.
    carousel.lock();

    jQuery.get(
        'special_textscroller.php',
        {
            'feed': 'http://jquery.com/blog/feed/atom/'
        },
        function(xml) {
            mycarousel_itemAddCallback(carousel, xml);
        },
        'xml'
    );
};

function mycarousel_itemAddCallback(carousel, xml)
{
    var $items = jQuery('item', xml);

    $items.each(function(i) {
        carousel.add(i + 1, mycarousel_getItemHTML(this));
    });

    carousel.size($items.size());

    // Unlock and setup.
    carousel.unlock();
    carousel.setup();
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    return '<h3><a href="'+$('link', item).text()+'">'+$('title', item).text()+'</a></h3><p>'+mycarousel_truncate($('description', item).text(), 90)+'</p>';
};

/**
 * Utility function for truncating a string without breaking words.
 */
function mycarousel_truncate(str, length, suffix) {
    if (str.length <= length) {
        return str;
    }

    if (suffix == undefined) {
        suffix = '...';
    }

    return str.substr(0, length).replace(/\s+?(\S+)?$/g, '') + suffix;
};

jQuery(document).ready(function() {
    /**
     * We show a simple loading indicator
     * using the jQuery ajax events
     */
    jQuery().ajaxStart(function() {
        jQuery(".jcarousel-clip-vertical").addClass('loading');
    });

    jQuery().ajaxStop(function() {
        jQuery(".jcarousel-clip-vertical").removeClass('loading');
    });

    jQuery('#mycarousel').jcarousel({
        vertical: true,
        size: 0,
        initCallback: mycarousel_initCallback
    });
});
</script>

Edited by Nick Evan: Fixed formatting

2
Contributors
3
Replies
4
Views
6 Years
Discussion Span
Last Post by zac1987
0

It looks like you have two document.ready functions. It's hard to tell. Can you post the page index.php please?

I found this on their web site. Still looking for a shut off switch.

jQuery('#mycarousel').jcarousel({
vertical: true,
size: 0,
initCallback: mycarousel_initCallback
});

You look like you are missing a property for the initCallback function.

itemCallback: {onBeforeAnimation: mycarousel_itemCallback}
0

This is from the jcarousel web site.

buttonNextCallback function null
JavaScript function that is called when the state of the 'next' control is changing. The responsibility of this method is to enable or disable the 'next' control. Three parameters are passed: The instance of the requesting carousel, the control element and a flag indicating whether the button should be enabled or disabled.

This looks like what you need. Stop the next control and you have it.

I haven't looked into the jquery carousel file as all I saw were .min versions.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.