MopBox is draggable show box similar to lightbox that can contain div, image , flashmovie, video, etc. If it has more than one children, slider navigation is shown automatically. It also has an resizable option.
Steps to Add itto Blogger:
1.Login to the Blogger account.
2. Now Go to Design > Edit HTML.
3.Now search for the </head> tag and paste the following code just Above/Before it.
<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/27675057/MopBox/mopBox-2.5.css">
<!--jquerySet start-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/MopBox/jquery.pngFix.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/MopBox/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/MopBox/jquery.ui.widget.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/MopBox/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/MopBox/jquery.ui.position.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/MopBox/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/MopBox/jquery.ui.resizable.js"></script>
<!--jquerySet end-->
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/MopBox/mopBox-2.5.js"></script>
2.Go to the Post/Page you want to add MopBox and then go to Edit HTML tab .
3.Now copy the code from below and paste it there.
<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/27675057/MopBox/mopBox-2.5.css">
<!--jquerySet start-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/MopBox/jquery.pngFix.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/MopBox/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/MopBox/jquery.ui.widget.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/MopBox/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/MopBox/jquery.ui.position.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/MopBox/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/MopBox/jquery.ui.resizable.js"></script>
<!--jquerySet end-->
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/MopBox/mopBox-2.5.js"></script>
4.Now adding images into MopBox is somewhat tricky Affair
Firstly make a Link like this:
<a id="demo1Btn" href="#">demo1</a>
Now make a div tag like this
<div class="hidden">
<div id="demo1">
<div>
<img src="2.jpg" width="270" height="240" /></div>
</div>
</div>
Hidden is used to make it content inside div tag invisible
After that you have to add a javascript snippet to link this to MopBox
<script type="text/javascript">
$(document).ready(function(){
$("#demo1Btn").mopBox({'target':'#demo1','w':270,'h':240});
});
</script>
Do see the colored portions in the above code to understand the workings of the script
Confusing,well it is a little different but this div thing allows it to add Gallery very easy.The author says it as Page (Gallery is Page,Page is Gallery) because it can contain Plain text,Images,External HTML and even SWFs.
Some thing like:
<div class="hidden">
<div id="demo1">
<div>
<img src="2.jpg" width="270" height="240" /></div>
<div>
<p>txt tx txt txt txt txt tx t</p></div>
<div>
<object data="demo1.swf" type="application/x-shockwave-flash" width="150" height="150" id="demo1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="demo/demo1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
</object></div>
</div>
</div>
The most intriguing thing about this Lightbox script is its Gallery(Page) Navigation Style.
There are many changeable options,Here is a List of them:
| 'Target': | Specify the target. (Example) 'target': '# demo' |
| 'W': | The width of the content display area. If multiple pages are set to all pages in this size. |
| 'H': | Specifies the content height of the display area. If multiple pages are set to all pages in this size. |
| 'Speed': | The speed at which the slide page. Specifies 1000 milliseconds. The default is 300. (Example) 'speed': 500 |
| 'Step': | How many pages is time to move the slider to slide the button once. The default is 1. (Example) 'step': If you set 10 to move to page 10. |
| 'StepPx': | The amount the slider moves when you move one page button. The default is 10. (Example) 'stepPx': 5 |
| 'BtnW': | The slider button and wide. The default is 100. |
| 'NaviPosi': | The vertical position of the contents of the navigation display area. The default is 5. |
| 'FbPosi': | The distance from the left and right edges of the display area of the back button and forward button content. The default is 50. |
| 'StartPage': | This page is displayed when the MopBox. The default is 1. |
| 'Bgc': | Background color of content display area. |
| 'Resize': | Set the 's' or 'se'. 'S' can be resized only vertically downward. 'Se' can be resized freely to the lower right. |
| 'RszTarget': | If those are nested such that the specified width and height of the DIV in the 'target', and set the 'rszTarget', can be resized to fit the scale of the target.(Example) 'rszTarget': '. ResizeTarget' |
| 'RzW': | The width of the 'rszTarget'. 'RszTarget' If you do not will not work. (Example) 'rzW': 250 |
| 'RzH': | Specifies the height of the 'rszTarget'. 'RszTarget' If you do not will not work.(Example) 'rzW': 200 |
| 'Fnc': | To register the name of any function performed after the display MopBox.mopBox-please change the first line of 114-115 2.4.js. (Example) 'fnc': 'anyname' |
Here are some Example Codes:
<style type="text/css">
<!--
#demo {
height: 100%;
width: 100%;
}
#demo .expl {
width: 600px;
background-color: #F8F8F2;
margin: 0 auto 0 auto;
}
.flashCase1 {
height: 200px;
width: 210px;
margin: 50px 0 0 60px;
overflow: hidden;
display: inline;
}
#demo4Btn {
padding: 5px;
margin: 0 0 10px 0;
background-color: #AE0000;
text-align: center;
color: #FFFFFF;
cursor: pointer;
}
.demo3Case {
height: 220px;
width: 250px;
text-align: left;
padding: 10px;
}
.demo4Case {
height: 220px;
width: 250px;
text-align: left;
padding: 10px;
}
.demo5Case {
height: 210px;
width: 240px;
text-align: left;
margin-left: 15px;
margin-top: 15px;
}
.demo6Case {
height: 230px;
width: 260px;
text-align: left;
margin-left: 15px;
margin-top: 15px;
}
.demo7Case {
height: 260px;
width: 310px;
text-align: left;
margin-left: 20px;
margin-top: 20px;
}
.scrollBox {
overflow: auto;
}
-->
</style><script type="text/javascript">
$(document).ready(function(){
/*demo7*/
demo.btn1();
/*end demo7*/
$("#demo1Btn").mopBox({'target':'#demo1','w':270,'h':240});
$("#demo2Btn").mopBox({'target':'#demo2','w':270,'h':240,'speed':200,'step':1,'stepPx':10,'btnW':100});
$("#demo3Btn").mopBox({'target':'#demo3','w':270,'h':240});
$("#demo4Btn").mopBox({'target':'#demo4','w':270,'h':240,'speed':300,'step':10,'stepPx':5,'btnW':100});
$("#demo4_2Btn").mopBox({'target':'#demo4','w':270,'h':240,'speed':300,'step':10,'stepPx':5,'btnW':100,'startPage':11});
$("#demo5Btn").mopBox({'target':'#demo5','w':270,'h':240,'speed':300,'step':10,'stepPx':5,'btnW':100,'resize':'s','rszTarget':'.demo5Case','rzW':240,'rzH':210});
$("#demo6Btn").mopBox({'target':'#demo6','w':290,'h':260,'speed':300,'step':10,'stepPx':5,'btnW':100,'resize':'se','rszTarget':'.demo6Case','rzW':260,'rzH':230});
$("#demo7Btn").mopBox({'target':'#demo7','w':350,'h':300,'btnW':100,'resize':'se','rszTarget':'.demo7Case','rzW':310,'rzH':260, 'fnc':'demoFnc'});
});
/*demo7*/
var demo={
btn1:function(){
$(".d7case").load("http://dl.dropbox.com/u/27675057/MopBox/Prayag%20Verma%20changed%20his%20profile%20photo..html");
$(".d7case").css({'fontSize':'24px'})
},
btn2:function(){
$(".d7case").load("http://dl.dropbox.com/u/27675057/MopBox/Prayag%20Verma%20changed%20his%20profile%20photo..html");
$(".d7case").css({'fontSize':'12px'})
}
}
var demoFnc=function(){
$(".btn1").click(function(){
demo.btn1();
});
$(".btn2").click(function(){
demo.btn2();
});
};
/*end demo7*/
</script>
<a id="demo1Btn" href="#">demo1</a>
<a id="demo2Btn" href="#">demo2</a>
<a id="demo3Btn" href="#">demo3</a> [swf and page concept]
<a id="demo4Btn" href="#">demo4</a> [8 pages]
<a id="demo5Btn" href="#">demo5</a>
<a id="demo6Btn" href="#">demo6</a>
<a id="demo7Btn" href="#">demo7</a> [Html example but not working]
<div class="hidden">
<div id="demo1">
<div>
<img src="http://www.mopstudio.jp/demo/img_demo/jpg3-2.jpg" width="270" height="240" /></div>
</div>
<div id="demo2">
<div>
<img src="http://www.mopstudio.jp/demo/img_demo/jpg3-2.jpg" width="270" height="240" /></div>
<div class="demo4Case">
<img class="f_left" src="http://www.mopstudio.jp/demo/img_demo/jpg5-2.jpg" width="74" height="136" />txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, </div>
<div>
<img src="http://www.mopstudio.jp/demo/img_demo/jpg3-1.jpg" width="270" height="240" /></div>
<div class="demo4Case">
<img class="f_left" src="http://www.mopstudio.jp/demo/img_demo/jpg5-2.jpg" width="74" height="136" />txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, </div>
<div>
<img src="http://www.mopstudio.jp/demo/img_demo/jpg3-2.jpg" width="270" height="240" /></div>
</div>
<div id="demo3">
<!--
<div>
<img src="http://www.mopstudio.jp/demo/img_demo/jpg3-2.jpg" width="270" height="240" /></div>
<div class="demo3Case">
<img class="f_left" src="http://www.mopstudio.jp/demo/img_demo/jpg5-2.jpg" width="74" height="136" />txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, </div>
<div class="flashCase1">
<object data="http://www.mopstudio.jp/demo/demo1.swf" type="application/x-shockwave-flash" width="150" height="150" id="demo1" align="middle"> <param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="demo/demo1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
</object>
</div>
<div>
<img src="http://www.mopstudio.jp/demo/img_demo/jpg3-1.jpg" width="270" height="240" /></div>
<div class="demo3Case">
<img class="f_left" src="http://www.mopstudio.jp/demo/img_demo/jpg5-1.jpg" width="136" height="74" />txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, </div>
-->
</div>
<div id="demo4">
<div class="demo4Case">
<img class="f_left" src="http://www.mopstudio.jp/demo/img_demo/jpg5-2.jpg" width="74" height="136" />txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, </div>
<div>
<img src="http://www.mopstudio.jp/demo/img_demo/jpg3-2.jpg" width="270" height="240" /></div>
<div class="demo4Case">
<img class="f_left" src="http://www.mopstudio.jp/demo/img_demo/jpg5-1.jpg" width="136" height="74" />txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, </div>
<div>
<img src="http://www.mopstudio.jp/demo/img_demo/jpg3-1.jpg" width="270" height="240" /></div>
<div class="demo4Case">
<img class="f_left" src="http://www.mopstudio.jp/demo/img_demo/jpg5-2.jpg" width="74" height="136" />txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, </div>
<div class="demo4Case">
<img class="f_left" src="http://www.mopstudio.jp/demo/img_demo/jpg5-1.jpg" width="136" height="74" />txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, </div>
<div>
<img src="http://www.mopstudio.jp/demo/img_demo/jpg3-2.jpg" width="270" height="240" /></div>
<div class="demo4Case">
<img class="f_left" src="http://www.mopstudio.jp/demo/img_demo/jpg5-2.jpg" width="74" height="136" />txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, </div>
</div>
<div id="demo5">
<div class="demo5Case scrollBox">
<img class="f_left" src="http://www.mopstudio.jp/demo/img_demo/jpg5-2.jpg" width="74" height="136" />txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable </div>
</div>
<div id="demo6">
<div class="demo6Case scrollBox">
<img class="f_left" src="http://www.mopstudio.jp/demo/img_demo/jpg5-1.jpg" width="136" height="74" />txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable txt img, resizable </div>
</div>
<div id="demo7">
<div class="demo7Case scrollBox f12">
<div class="contentCenter pad0_0_5_0">
| <span class="bold navi btn1 pointer">Load1</span> | <span class="bold navi btn2 pointer">Load2</span> |</div>
<div class="d7case">
</div>
</div>
</div>
</div>
5.Now save the Post/Page and see the magic.
Note: Please Host all the files on free hosting service like DropBox or Blogspot itself !
Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.
Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.
0 comments:
Post a Comment