locked
jQuery + jCarousel to read a webpart and generate the content

    Question

  • Ok so I am wanting to do this:
    Read a webpart and generate the data to the carousel.

    I will include a style that will hide the webpart from the screen. So therefore the carousel is the only thing left.


    I think it is possble in theory... but anyone have any information or direction for me?

    Thanks
    • Edited by Mike Walsh FIN Friday, February 26, 2010 4:39 AM - help removed from Title. NEVER write "Help" in a Title. It is not a problem description.
    Friday, February 26, 2010 1:43 AM

Answers

  • It sounds like you want to use jQuery and jCarousel to display something in a webpart.  Here is how you can do that:

    First, let's assume that you will be displaying image thumbnails from images that are stored in a picture library.  Go ahead and create a picture library and upload several sample images to your picture library so you have some data to work with.  Picture Libraries automatically generate thumbnails, and those would be good to use in a jCarousel.  Browse to the picture library so that you can see the thumbnails in your web browser, and for each image, right click on each thumbnail, copy the thumbnail's URL, and paste the URL in notepad.  You want to end up with several URLs to thumbnails.  We'll use them later.

    Second, create a generic webpart.  Override the Render function, outputting generic 'hello world' HTML, deploy the webpart, and add the webpart to your page.  Make sure the web part shows 'hello world' before moving on to the next step.

    Third, add the jQuery and jCarousel javascript files to your sharepoint server somewhere.  You can create a document library in your site and put them there, or you can upload them with Sharepoint designer.  There are probably other options, too - you just need to have some place where you can reference them from your webpart.  Open your web browser and make sure you can browse to and view the .js files.  Make note of the URLs to the .js files.

    Fourth, create a static jCarousel.  To do this, change the static HTML in the onrender function of the webpart to include the javascript needed for jCarousel (the .js URLs were found in step 3).  Look on the jCarousel site for examples on what a static implementation of jCarousel can look like.  Copy and paste thumbnail URLs (from step 1) into your HTML.  This will hardcode all of the HTML to link to your image thumbnails.  Redeploy the webpart and make sure the carousel works with the hardcoded content.

    Fifth, replace the static HTML in the onrender function with dynamically generated HTML.  For Example, if you want to display all the images in a picture library, use the Sharepoint APIs to get URLs to the images in the list.  At this point you can filter or sort using C# code to display whatever particular images you want.  After adding this code, be sure to redeploy the web part.

    If all goes well, you should be done.


    Does this provide you with enough guidance?  I've tried to break it apart into separate steps so you can work on one thing at a time until you get that one item figured out, then move on to the next.  That way you can avoid having 2 or 3 things to troubleshoot at once.

    FYI, I've never worked with jCarousel before, so I can't tell you exactly how to implement it, but they seem to have a decent amount of documentation and samples at their website (http://sorgalla.com/jcarousel/).

        Tim




    • Marked as answer by Chengyi Wu Friday, March 05, 2010 3:30 AM
    Friday, February 26, 2010 4:26 AM

All replies

  • It sounds like you want to use jQuery and jCarousel to display something in a webpart.  Here is how you can do that:

    First, let's assume that you will be displaying image thumbnails from images that are stored in a picture library.  Go ahead and create a picture library and upload several sample images to your picture library so you have some data to work with.  Picture Libraries automatically generate thumbnails, and those would be good to use in a jCarousel.  Browse to the picture library so that you can see the thumbnails in your web browser, and for each image, right click on each thumbnail, copy the thumbnail's URL, and paste the URL in notepad.  You want to end up with several URLs to thumbnails.  We'll use them later.

    Second, create a generic webpart.  Override the Render function, outputting generic 'hello world' HTML, deploy the webpart, and add the webpart to your page.  Make sure the web part shows 'hello world' before moving on to the next step.

    Third, add the jQuery and jCarousel javascript files to your sharepoint server somewhere.  You can create a document library in your site and put them there, or you can upload them with Sharepoint designer.  There are probably other options, too - you just need to have some place where you can reference them from your webpart.  Open your web browser and make sure you can browse to and view the .js files.  Make note of the URLs to the .js files.

    Fourth, create a static jCarousel.  To do this, change the static HTML in the onrender function of the webpart to include the javascript needed for jCarousel (the .js URLs were found in step 3).  Look on the jCarousel site for examples on what a static implementation of jCarousel can look like.  Copy and paste thumbnail URLs (from step 1) into your HTML.  This will hardcode all of the HTML to link to your image thumbnails.  Redeploy the webpart and make sure the carousel works with the hardcoded content.

    Fifth, replace the static HTML in the onrender function with dynamically generated HTML.  For Example, if you want to display all the images in a picture library, use the Sharepoint APIs to get URLs to the images in the list.  At this point you can filter or sort using C# code to display whatever particular images you want.  After adding this code, be sure to redeploy the web part.

    If all goes well, you should be done.


    Does this provide you with enough guidance?  I've tried to break it apart into separate steps so you can work on one thing at a time until you get that one item figured out, then move on to the next.  That way you can avoid having 2 or 3 things to troubleshoot at once.

    FYI, I've never worked with jCarousel before, so I can't tell you exactly how to implement it, but they seem to have a decent amount of documentation and samples at their website (http://sorgalla.com/jcarousel/).

        Tim




    • Marked as answer by Chengyi Wu Friday, March 05, 2010 3:30 AM
    Friday, February 26, 2010 4:26 AM
  • Hi,

    There article is clear expect one thing for me:

    "Second, create a generic webpart.  Override the Render function, outputting generic 'hello world' HTML, deploy the webpart, and add the webpart to your page.  Make sure the web part shows 'hello world' before moving on to the next step."

    How do you create à "generic webpart"? can you be more specific and give a step by step.

    How can you edit and see the code of the Render funtion?

    Thanks a lot

    Benjamin

    Monday, April 19, 2010 11:33 AM
  • Benjamin,

    There are already a plethora of very good articles written about how to create a webpart, so rather than write another one myself, I'll link to some:

            http://www.google.com/search?q=create+a+webpart

    Tim

     

    Monday, April 19, 2010 12:43 PM