Polaroid Gallery Quick Start

Posted on November 21, 2011 by admin

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.

Custom payment gateway for AJAX PayPal Cart

Posted on September 11, 2011 by admin

You can add your own payment gateway by the setting below.

        // Create a basic cart
        var cart = $('#cart').DCAJAXPaypalCart({
            width:600,
            height:400,
            paymentOptions:{
                server:"http://YOU_PAYMENT_GATEWAY_URL.php"
            }
        });

It will post a set of item and shipping by “POST” method to the gateway.

The var name is same as the item and shipping variables in paypal.

https://cms.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=developer/e_howto_html_Appx_websitestandard_htmlvariables

Mobile Photo Gallery jQuery plugin – Quick Start

Posted on July 15, 2011 by admin

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.1.5.0.min.js" type="text/javascript"></script>

<script src="lib/dc.mobilephotoalbum.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="css/dc.core.min.css" type="text/css" media="screen" />

<link rel="stylesheet" href="css/dc.mobilephotoalbum.custom.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').DCMobilePhotoAlbum({
		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-basic.html.

changing the theme color for AJAX PayPal Cart jQuery Plugin

Posted on April 12, 2011 by admin

1. Change theme color by parameter. Add the ‘themeColor’ and ‘themeDarkColor’ when initialize the cart.

    $(function(){
        // Create a basic cart
        var cart = $('#cart').DCAJAXPaypalCart({
            width:600,
            height:400,
            themeColor:'#FF0000',
            themeDarkColor:'#000000',
            paypalOptions:{
                business:'YOU_PAYPAL_EMAIL@email.com'
            }
        });
    });

2. You can also changing the color by editing the dc.cart.css included in the lib folder.

Quick Start AJAX PayPal Cart jQuery Plugin

Posted on April 12, 2011 by admin

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.

Quick Start – Photo Rotator JQuery Plugin

Posted on January 11, 2011 by admin

In this quick start tutorial, you will learn how to setup a basic Photo Rotator. 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.

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

$(document).ready(function() {

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

* Code to init the gallery

// Create a gallery with default settings

$(‘#gallery_1′).dcPhotoRotator({

‘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.

Javascript Gallery XML format

Posted on December 20, 2010 by admin

Here is a example of the xml which use to driven the javascript gallery.

<?xml version=”1.0″ encoding=”UTF-8″?>

<items>

</items>

The xml is a simple text file which hold a structured text node. A basic xml will have a <items></items> tag which hold several <item></item> tag. Each <item> tag represent an item in the gallery.

For each item tag, the “source” attribute is necessary which define the path of the image. You can also have “thumbnail” attribute which define the path of small thumbnail image. And “category” define the category of the image.

Thumbnail Gallery JQuery Plugin Quick Start

Posted on December 20, 2010 by admin

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.

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

$(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.

How to create categories for photos

Posted on October 29, 2010 by admin

1. Create a collection or create a folder for the photos you want appear in the gallery.

2. In the Library view, select the photos you want to group in a catergory.

3. In the Metadata panel, fill in the group name for these photos. I put “John” in “Creator”. Repeat for other photos and name them to others name.

4. Switch to “Web” view. From the “Image Info” section. Click the “Custom Settings” in Catergory and select “edit”.

5. Then select “Create” in “PTPC” section and insert.

6. You now need to refresh the data. So, you need to switch to Library view and switch back to Web view.

Quick Start For Using Banner Rotator Template

Posted on August 1, 2010 by admin

1. Copy the necessary files.

The template is located in the “template” directory of downloaded zip file. You can extract the file in a temporary directory and double click the template-xxxx.html to see the output of the template.

Below is the description of each file in the template.

Source files
template-xxxx.flaÂ Â Â Â Â Â - the source file for the Flash movie

template.asÂ Â Â Â Â Â Â Â Â Â Â Â - the action script file source

Template files (Files needed to upload)

template-xxxx.swfÂ Â Â Â Â – complied swf movie

template-xxxx.htmlÂ Â Â Â - html which hold the flash movie
gallery/images.xmlÂ Â Â Â Â Â - sample xml file

gallery/images/*.jpgÂ Â Â Â Â Â - sample image

gallery/thumbnail/*.jpgÂ Â Â - sample thumbnail image

AC_RunActiveContent.jsÂ Â Â - javascript file use by the html

2. Editing the xml file

The template is driven by xml file. You need to edit the xml file in order to define the image and setting of the banner rotator.

You can edit the default xml in gallery/images.xml by TextEdit on Mac or NotePad on Windows. The default format is show below.

<title>Title Here</title>

<OTHER_SETTING></OTHER_SETTING>

</item>

<title>Title Here</title>

</item>

</items>

tag have one attribute “relativepath” which define if the images path is related to the xml file. If set to true, the path of the image will related to the xml file. e.g. if put the xml inside a folder called “gallery” and put the image files in a folder called “gallery/images”, you just need to define the image path in the xml as “images/xxxxx.jpg”.

Each tag have several attribute. The definition of each attribute is show below.

path: define the image path file (large image) of corresponding slide

thumbnail: define the thumbnail image path of corresponding slide

width/height: define the dimension of the image file

3. Parameter setting for each slide

You can add additional setting for each slide by adding child tag to tag.

For example, we want to set the transition duration for this slide. You can edit the xml like below.

<title>Title Here</title>

</item>

For settings available for each banner rotator, you can refer to this guide.

4. Setting for the layout

Beside the setting of each slide, you can setup the layout of the template by html.

Edit the template-xxxxx.html by any text editor. Search for the code “FlashVars”. You will see the settings like below.

You can edit the value to change the layout of the template.

titleBackgroundColor : Color of the title background

titleBackgroundAlpha : Alpha of the title background

thumbnailAlign : Alignment of the thumbnail. 0: Top 1: Right 2: Bottom 3: Left 7: Hide

thumbnailWidth : Width of the thumbnail

thumbnailHeight : Height of the thumbnail

5. (Optional) Setting in Dreamweaver

If you are using dreamweaver instead of using the stock html. You can copy the swf in your project directory and insert the swf by menu “Insert>media>Flash(swf)”

Then you can adding the parameter by:

a. Select the flash object in the page

b. Open properties panel. Click the parameter button.

c. Add a parameter called “FlashVars” and add the setting to the value

Digicrafts

Knowledge Base (Beta)

Author Archives: admin

Polaroid Gallery Quick Start

Custom payment gateway for AJAX PayPal Cart

Mobile Photo Gallery jQuery plugin – Quick Start

changing the theme color for AJAX PayPal Cart jQuery Plugin

Quick Start AJAX PayPal Cart jQuery Plugin

Quick Start – Photo Rotator JQuery Plugin

Javascript Gallery XML format

Thumbnail Gallery JQuery Plugin Quick Start

How to create categories for photos

Quick Start For Using Banner Rotator Template

1. Copy the necessary files.

2. Editing the xml file

3. Parameter setting for each slide

4. Setting for the layout

5. (Optional) Setting in Dreamweaver