Retreiving more data (sorry, cant be more especific)

soltek · December 27, 2010

Hello, I just spent the entire afternoon setting the JCarousel plugin to work the MySQL data and, with some help, I made some progress. The images I wanted to be displayed are there, though, I'd like to add an hyperlink to the images, so the users can access to the page of the book where the image belongs.

But, surprise, surprise, I've no clue about how to do it - and I tried a lot xD

At the end of the post, you can see the code of both pages (the one to get the data and the other to show it), but I think this is the most important part about this:

This is what prints the image on the page-

function mycarousel_getItemHTML(url)

{

return '<a href=http://google.com><img src="' + url + '" width="75" height="75" alt="" /></a>';

the + url + thingy/value is given by the php file, that has this-

$query = "SELECT id, sale, image1, added FROM books WHERE sale= 'yes' ORDER BY added DESC LIMIT 0,10";

$images = array();

$result = mysql_query($query);

while ($row = mysql_fetch_array($result))

{

$images[] = "http://URL.org/books/images/{$row['image1']}";

}

As you can see, I can add the href tag and it works, though, instead of the google adress, I wanted to have the ID of the entry where the image is located. http://www.URL.org/ebooks.php?id={$row['id']}

Do you know how to pass not only the image, but also the ID?

I'd be really, really awesome if you did.

Thanks

This is the page used to get the data:

<?php
$con = mysql_connect('localhost', 'username', 'password');
mysql_select_db("db_name", $con);
// Array indexes are 0-based, jCarousel positions are 1-based.

$first = max(0, intval($_GET['first']) - 1);

$last  = max($first + 1, intval($_GET['last']) - 1);


$length = $last - $first + 1;

// ---

$query = "SELECT id, sale, image1, added FROM books WHERE sale= 'yes' ORDER BY added DESC LIMIT 0,10";
$images = array();
$result = mysql_query($query);
while ($row = mysql_fetch_array($result))
{
$images[] = "http://url.com/books/images/{$row['image1']}";
}

$total    = count($images);

$selected = array_slice($images, $first, $length);


// ---

header('Content-Type: text/xml');

echo '<data>';


// Return total number of images so the callback
// can set the size of the carousel.

echo '  <total>' . $total . '</total>';


foreach ($selected as $img) {
    echo '  <image>' . $img . '</image>';
}

echo '</data>';


?>]

This is the page to show the data (the images):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />

<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>

<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>

<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/ie7/skin.css" />

<script type="text/javascript">

function mycarousel_itemLoadCallback(carousel, state)
{
    // Check if the requested items already exist
    if (carousel.has(carousel.first, carousel.last)) {
        return;
    }

    jQuery.get(
        'dynamic_ajax_php.php',
        {
            first: carousel.first,
            last: carousel.last
        },
        function(xml) {
            mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
        },
        'xml'
    );
};

function mycarousel_itemAddCallback(carousel, first, last, xml)
{
    // Set the size of the carousel
    carousel.size(parseInt(jQuery('total', xml).text()));

    jQuery('image', xml).each(function(i) {
        carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text()));
    });
};

/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(url)
{
    return '<a href=http://google.com><img src="' + url + '" width="75" height="75" alt="" /></a>';
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        // Uncomment the following option if you want items
        // which are outside the visible range to be removed
        // from the DOM.
        // Useful for carousels with MANY items.

        // itemVisibleOutCallback: {onAfterAnimation: function(carousel, item, i, state, evt) { carousel.remove(i); }},
        itemLoadCallback: mycarousel_itemLoadCallback
    });
});

</script>
</head>
<body>
<div id="wrap">
  <h1>jCarousel</h1>
  <h2>Riding carousels with jQuery</h2>

  <h3>Carousel with dynamic content loading via Ajax</h3>
  <p>
    The data is loaded dynamically from a simple text file which contains the image urls.
  </p>

  <div id="mycarousel" class="jcarousel-skin-ie7">
    <ul>
      <!-- The content will be dynamically loaded in here -->
    </ul>
  </div>

</div>
</body>
</html>

theverychap · December 30, 2010

To get the ID too, you may have a slight restructure ahead:

Instead of this:

while ($row = mysql_fetch_array($result))
{
$images[] = "http://URL.org/books/images/{$row['image1']}";
}

Do this:

while ($row = mysql_fetch_array($result))
{
$images[$row['id']] = 'http://URL.org/books/images/' .$row['image1'];
}

This will require your Javascript function:

function mycarousel_getItemHTML(url)

to be passed an array (id, url) instead of the single argument (url)...

Does that get you on the right track..?

Sign In

Retreiving more data (sorry, cant be more especific)

Recommended Posts

soltek

Link to comment

Share on other sites

theverychap

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information