jBart
In this blog we will use jBart to build a basic product gallery and embed it in your site.
To make it simpler, we will take the sample data from eBay RSS feed.
In real life you will query the data from your product database.
Your First Widget
- Goto jBart Studio
- Click on 'New Tiles And Details Widget'
- In the dialog, set the widget name to 'Gallery'
- Click on 'Ebay', set the query to 'piano' and wait for the feed to fill the xml field
- Click 'OK'
The Result
- Search for 'grand'
- Click on pianos to see the details
- Goto the eBay page of a piano
Embed In Your Site
- Click Embed
- Empty the 'Widget Data' field
- Copy the 'html to embed' to your html page
Customize The Widget Css
- Let's add shadow to the hover behavior
- Click 'Easy Customize'
- Select 'Page gallery_md'
- Add 'Hover Css' feature at the features section at the bottom
- Set the css to 'box-shadow: 10px 10px 5px #888;'
- Click 'Ok' and click on the 'Preview' again
- Try to hover on the product gallery items
- Click 'Save'
- Refresh your html page to which you embedded the widget
Build Your Own Gallery
To build your own gallery first prepare sample xml of your data.
You can use existing RSS, Atom or other REST service you already have.
If you use Drupal, you can define a view for the feed (look at http://drupal-searchbox.blogspot.com/)
Playing with jBart
You can use RSS feed from the Internet and use jBart to visualize it and customize it.
Try the amazing pictures from National Geographic.
You can also browse the gallery items in jBart Studio and customize them online.
