Using CAYIN Media Player in HTML > Image Slide Show Tag and Attributes

Image Slide Show Tag and Attributes

You can also use Image Slideshow tag to create an image area in you HTML page. Please refer to the tables and examples in the following sections.

HTML Code

1
2
3
4
5
 
<object type="TYPE Attribute" height=" Object height (pixel)" width=" Object width (pixel)">
<param name="NAME Attribute " value=" value ">
<param name="NAME Attribute " value=" value ">
<param name="NAME Attribute " value=" value ">
</object">
Back to Top

TYPE Attribute

Attribute Attribute Value Note
Type app/cayin-image You can create Image slideshow area by creating this type of plug-ins.
SMP-2000 / SMP-4000: You can have a maximum of 4 image areas.
SMP-6000: You can have a maximum of 8 image areas.
Note

SMP-6000 (Distinct Mode): You can have a maximum of 16 image areas.
Back to Top

NAME Attribute

Attribute Attribute Value Note
src play-local-all
play-server-schedule-1
play-server-schedule-2
file://folder/image.jpg
file://folder2/ 		Image source attribute:
play-local-all: Play all files in the Media Folder.
play-server-schedule-x: follow central schedule area 1 or 2
file: you can specify files or a folder to play all image files in the folder.
duration [0-9]* Duration of displaying each image.
The default value of duration is 3.
sequence Forward
Backward
Random 		Sequence
recursive 0/Disable/No
1/Enable/Yes		 Include sub-folders
scale_fit 0
1
2		 Scale to fit area
0: Disable
1: Fit to area (Proportional)
2: Fit to area (Non-Proportional)
play-local-all 0
1		 Play local all files
0: Disable
1: Enable
play-server- schedule 0
1
2		 Play server schedule
0: Disable
1: Area 1
2: Area 2
transition_effect 0
1~50
255		 0: No effect (default)
Check the complete list of image transition effects

Complete List of Image Transition Effects

Code Name Code Name
0
No effect
 26
Squeeze – Vertical
1
Wipe Right (*1)
 27
Squeeze – Horizontal
2
Wipe Left (*2)
 28
Expand – Vertical
3
Wipe Down (*3)
 29
Expand – Horizontal
4
Wipe Up (*4)
 30
1 Clockwise Rotation
5
Insert Right
 31
2 Clockwise Rotations
6
Insert Left
 32
3 Clockwise Rotations
7
Insert Down
 33
4 Clockwise Rotations
8
Insert Up
 34
8 Clockwise Rotations
9
Fade Out + Fade In
 35
Push Right
10
Fade In
 36
Push Left
11
Unfold – Right
 37
Push Down
12
Unfold – Left
 38
Push Up
13
Unfold – Down
 39
Wipe Right – Soft Edge
14
Unfold – Up
 40
Wipe Left – Soft Edge
15
Fly In – Right Down
 41
Wipe Down – Soft Edge
16
Fly In – Left Down
 42
Wipe Up – Soft Edge
17
Fly In – Left Up
 43
Windshield Wiper
18
Fly In - Right Up
 44
4 Windshield Wipers
19
Rotate In
 45
Checkerboard – Large
20
Horizontal Blinds
 46
Checkerboard – Small
21
Vertical Blinds
 47
Tetris – Large
22
Box Out
 48
Tetris – Small
23
Box In
 49
Dissolve – Large
24
Circle Out
 50
Dissolve – Small
25
Circle In
 255
Random
*1: Change the transition effect name from "Left to right" to "Wipe Right".
*2: Change the transition effect name from "Right to left" to "Wipe Left".
*3: Change the transition effect name from "Top to bottom" to "Wipe Bottom".
*4: Change the transition effect name from "Bottom to top" to "Wipe Top".
Back to Top

Example

Play the image files in the Media Folder repeatedly

1
2
3
4
5
6
7
8
9
10
11
 
<html>
<head>
</head>
<body>
<object type="app/cayin-image" width="320" height="240">
<param name="src" value="file://folder/image1.jpg">
<param name="src" value="file://folder/image2.jpg">
<param name="src" value="file://folder/image3.jpg">
</object>
</body>
</html>
Back to Top