Tag Archives: Javascript

Polaroid Gallery Quick Start

Posted on by
Reply

In this quick start tutorial, you will learn how to setup a basic gallery. You need to have basic html knowledge. Prepare your favor text edit tool such as TextEdit in Mac or  Dreamweaver. Then, follow the step below to build your gallery.

1. Unzip the product.

2. Copy the “lib” folder into your project directory

3. Prepare the image you want to appear in the gallery and place inside a sub folder in your project directory.

4. Add a tag where you want to add the gallery and add a id. And set the width and height.

<div id="gallery_1" style="width:400px;height:300px;"></div>

5. Paste follow code in the html file which you want to include the gallery between the <head>  tag.

<!-------------  START COPY ------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="lib/dc.core.min.js" type="text/javascript"></script>
<script src="lib/dc.polaroidgallery.1.0.js" type="text/javascript"></script>
<link rel="stylesheet" href="lib/dc.polaroidgallery.1.0.css" type="text/css" media="screen" />
<link rel="stylesheet" href="lib/theme.css" type="text/css" media="screen" />
<!-------------  END COPY --------------->

 

<script type="text/javascript">

$(document).ready(function() {	

	var album_array=[
		{	source:'albums/large/o1.jpg',
		 	thumbnail:'albums/thumb/o1.jpg',
			title:'Title 1','description':'description.',category:'Album 1'},
{	source:'albums/large/o2.jpg',
		 	thumbnail:'albums/thumb/o2.jpg',
			title:'Title 2','description':'description.',category:'Album 1'},
{	source:'albums/large/o3.jpg',
		 	thumbnail:'albums/thumb/o3.jpg',
			title:'Title 3','description':'description.',category:'Album 2'}
	];

	// Create a gallery with default settings
	$('#gallery_1').DCPolaroidGallery({
		source:album_array
	});
});
</script>

6. Now, you can test the gallery by open the html in your browser.

* The download product included a basic gallery inside the examples folder. You can edit the index.html.

Quick Start AJAX PayPal Cart jQuery Plugin

Posted on by
1

1. Unzip the product.

2. Copy the “lib” folder into your project directory.

3. Include the library by adding the following headers between <head> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 

<!-- CSS for this product-->    
<link rel="stylesheet" type="text/css" href="lib/dc.core.1.0.0.min.css" />        
<link rel="stylesheet" type="text/css" href="lib/dc.cart.css" />        

<!-- Javascript for this product-->    
<script src="lib/dc.core.1.0.0.min.js" type="text/javascript"></script>      
<script src="lib/dc.cart.1.0.0.min.js" type="text/javascript"></script>          
<script src="lib/dc.cart.lang.js" type="text/javascript"></script>

4. Insert a <div id=”cart”></div> tag in your html where you want to put the cart widget.

5. Insert below script in between <head> tag.


$(function(){

 // Create a basic cart

var cart = $('#cart').DCAJAXPaypalCart({
            width:600,
            height:400,
            paypalOptions:{
                business:'YOU_PAYPAL_EMAIL@email.com'
            }
        });

 });

6. Now, you can test the cart by open the html in your browser.
7. To add a buy button. Insert a link in your html.

<a id=”item_1″>Buy this product</a>

8. Insert the follow script below the create cart script.

   $(function(){
		……

        // Create a buy button from a link with id "buy_button_1"
        cart.addBuyButton("#buy_button_1",{
            id:'item_1',                        // Specify the unique id for this item
            name:'Item 1',                  	// Item name appear on the cart
            thumbnail:'product_thumbnail.jpg',  // Thumbnail path of the item (Optional)
            price:'10'                          // Cost of the item
            shipping:5         				// Shipping cost for the item (Optional)
        });
	});

9. You can test it in a browser. Click the link will add a product to cart.

Thumbnail Gallery JQuery Plugin Quick Start

Posted on by
6

In this quick start tutorial, you will learn how to setup a basic Thumbnail Gallery. You need to have basic html knowledge. Prepare your favor text edit tool such as TextEdit in Mac or  Dreamweaver. Then, follow the step below to build your gallery.

1. Unzip the product.

2. Copy the “lib” folder into your project directory


3. Prepare the image you want to appear in the gallery and place inside a sub folder in your project directory.

4. Add a tag where you want to add the gallery and add a id. And set the width and height.

<div id=”gallery_1″ style=”width:400px;height:300px;”></div>

5. Paste follow code in the html file which you want to include the gallery between the <head>  tag.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js” type=”text/javascript”></script>
<script src=”lib/dc.thumbgallery.ycomp.js” type=”text/javascript”></script>
<link rel=”stylesheet” href=”lib/dc.thumbgallery.ycomp.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”lib/thumbgallery.custom.css” type=”text/css” media=”screen” />

<script type=”text/javascript”>

$(document).ready(function() {

/*******************************************

* Code to init the gallery

*/

// Create a gallery with default settings

$(‘#gallery_1′).dcThumbnailGallery({

‘source’:[

{'source':'images/1.jpg'},

{'source':'images/2.jpg'},

{'source':'images/3.jpg'},

{'source':'images/4.jpg'},

{'source':'images/5.jpg'}

]

});

};

});

</script>

6. Now, you can test the gallery by open the html in your browser.