Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.
Features :
- Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
- Customizable through settings and CSS
- Groups related items and adds navigation.
- Support fancy transitions by using easing plugin
- Adds a nice drop shadow under the zoomed item
- Also works in all type of HTML documents
- Go To Blogger > Template > Edit HTML
- Find </head> and post following script just above it :
<script src="http://widcraft.googlecode.com/svn/jquery.js" type="text/javascript">
</script>
<script src="http://widcraft.googlecode.com/svn/jquery.fancybox-1.3.4.js" type="text/javascript">
</script>
<style>
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
cursor: pointer;
overflow: hidden;
z-index: 1104;
display: none;
}
#fancybox-loading div {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 480px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png');
}
#fancybox-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1100;
display: none;
}
#fancybox-tmp {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: none;
}
#fancybox-wrap {
position: absolute;
top: 0;
left: 0;
padding: 20px;
z-index: 1101;
outline: none;
display: none;
}
#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #fff;
}
#fancybox-content {
width: 0;
height: 0;
padding: 0;
outline: none;
position: relative;
overflow: hidden;
z-index: 1102;
border: 0px solid #fff;
}
#fancybox-hide-sel-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 1101;
}
#fancybox-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png') -40px 0px;
cursor: pointer;
z-index: 1103;
display: none;
}
#fancybox-error {
color: #444;
font: normal 12px/20px Arial;
padding: 14px;
margin: 0;
}
#fancybox-img {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: none;
outline: none;
line-height: 0;
vertical-align: top;
}
#fancybox-frame {
width: 100%;
height: 100%;
border: none;
display: block;
}
#fancybox-left, #fancybox-right {
position: absolute;
bottom: 0px;
height: 100%;
width: 35%;
cursor: pointer;
outline: none;
background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigdvfrtMF7oKZ7-wG71yoNBrcJyK_eyd_nIah0avR8yS9Q5AE96FiIcaR94jYWhomzGJPGcHk7rCqAthGHm0S5-sF5S8h2HmQh2Mh0y4mv786bHcJ3cAsrC8kM48qqko6gZU4Menj5GdY/s1600/fancy_blank.gif');
z-index: 1102;
display: none;
}
#fancybox-left {
left: 0px;
}
#fancybox-right {
right: 0px;
}
#fancybox-left-ico, #fancybox-right-ico {
position: absolute;
top: 50%;
left: -9999px;
width: 30px;
height: 30px;
margin-top: -15px;
cursor: pointer;
z-index: 1102;
display: block;
}
#fancybox-left-ico {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png');
background-position: -40px -30px;
}
#fancybox-right-ico {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png');
background-position: -40px -60px;
}
#fancybox-left:hover, #fancybox-right:hover {
visibility: visible; /* IE6 */
}
#fancybox-left:hover span {
left: 20px;
}
#fancybox-right:hover span {
left: auto;
right: 20px;
}
.fancybox-bg {
position: absolute;
padding: 0;
margin: 0;
border: 0;
width: 20px;
height: 20px;
z-index: 1001;
}
#fancybox-bg-n {
top: -20px;
left: 0;
width: 100%;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVo42w-pqNiylHeVhxcc8SZyaRlbzHIi4gTJtv7RCH5INV8PsxANlle0Bwmy96VFS2tbiwul7QViqiboDr00nEPLIRhbB28ZorLS-4h6ZgbiXMIcg7oo-piL2dhXNOhdWFOwbwxigq35k/s1600/fancybox-x.png');
}
#fancybox-bg-ne {
top: -20px;
right: -20px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png');
background-position: -40px -162px;
}
#fancybox-bg-e {
top: 0;
right: -20px;
height: 100%;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDtZFAUlVJ2UVzCfW7QPGIlNRqdk8iRpaB66QAmpby-MbWhZGxBuH34zHsjhdfcmUOj4KfuFklUons4jHsjK9WEMH_HjmmMP_xrDvJkLJm323vKZcqVl9kNvWO0MirPh2OX4y-6hTOR30/s1600/fancybox-y.png');
background-position: -20px 0px;
}
#fancybox-bg-se {
bottom: -20px;
right: -20px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png');
background-position: -40px -182px;
}
#fancybox-bg-s {
bottom: -20px;
left: 0;
width: 100%;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVo42w-pqNiylHeVhxcc8SZyaRlbzHIi4gTJtv7RCH5INV8PsxANlle0Bwmy96VFS2tbiwul7QViqiboDr00nEPLIRhbB28ZorLS-4h6ZgbiXMIcg7oo-piL2dhXNOhdWFOwbwxigq35k/s1600/fancybox-x.png');
background-position: 0px -20px;
}
#fancybox-bg-sw {
bottom: -20px;
left: -20px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png');
background-position: -40px -142px;
}
#fancybox-bg-w {
top: 0;
left: -20px;
height: 100%;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDtZFAUlVJ2UVzCfW7QPGIlNRqdk8iRpaB66QAmpby-MbWhZGxBuH34zHsjhdfcmUOj4KfuFklUons4jHsjK9WEMH_HjmmMP_xrDvJkLJm323vKZcqVl9kNvWO0MirPh2OX4y-6hTOR30/s1600/fancybox-y.png');
}
#fancybox-bg-nw {
top: -20px;
left: -20px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png');
background-position: -40px -122px;
}
#fancybox-title {
font-family: Helvetica;
font-size: 12px;
z-index: 1102;
}
.fancybox-title-inside {
padding-bottom: 10px;
text-align: center;
color: #333;
background: #fff;
position: relative;
}
.fancybox-title-outside {
padding-top: 10px;
color: #fff;
}
.fancybox-title-over {
position: absolute;
bottom: 0;
left: 0;
color: #FFF;
text-align: left;
}
#fancybox-title-over {
padding: 10px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil-JzZ7TtsvRD3JPoR-TE4k_DSw8wcCsRlAhNd0qNNG5StLWCi11c41MYDadrM2WoG_eEMQ7ijSUvvSjZqjUpcEdqBzE5lJVdcqpg0kfmO-WBLnk1kwCbe7dsDhbLUiRvGCq9b1xmFDDo/s1600/fancy_title_over.png');
display: block;
}
.fancybox-title-float {
position: absolute;
left: 0;
bottom: -20px;
height: 32px;
}
#fancybox-title-float-wrap {
border: none;
border-collapse: collapse;
width: auto;
}
#fancybox-title-float-wrap td {
border: none;
white-space: nowrap;
}
#fancybox-title-float-left {
padding: 0 0 0 15px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png') -40px -90px no-repeat;
}
#fancybox-title-float-main {
color: #FFF;
line-height: 29px;
font-weight: bold;
padding: 0 0 3px 0;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVo42w-pqNiylHeVhxcc8SZyaRlbzHIi4gTJtv7RCH5INV8PsxANlle0Bwmy96VFS2tbiwul7QViqiboDr00nEPLIRhbB28ZorLS-4h6ZgbiXMIcg7oo-piL2dhXNOhdWFOwbwxigq35k/s1600/fancybox-x.png') 0px -40px;
}
#fancybox-title-float-right {
padding: 0 0 0 15px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png') -55px -90px no-repeat;
}
/* IE6 */
.fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMTXg-rnAXbtL8EPrgrjD1ynAprxYyXQCMA-FPDd2SciYZIQw80t21rjqn-JJiBzEY906u1jJ7SCfpUXPZtEk5dq5UGbGvtgh5LyQeFZMx4i4QqJWGwdTOuHxf5V8Q-ZwjF1xt8fWbJ8/s1600/fancy_close.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJHtoT0sQAiKeTIY_08F4tPmq5_YIBKpGK21IEV2b8gKH0HSdj7oAVL58OcvJaVWEi5Ndze3zzL7scNmsrwANfV1c_I8lsmFcBbCgTUIId2H88fZJFV9ZFg5T-vQ8nRc7yxG326Os2TT4/s1600/fancy_nav_left.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWPsgqa6CQ4pXjqiynpCJUAY72a4ZMLYxl970Ce7Nyh98LIxbgKwSYbPu3j1der3QF2_0UurDp-ujQJP4VWgYgMvzMZaoeFdmT6BdutFXZMLrSle43aEanAaWdzScxfxbvEElMuQwIDZU/s1600/fancy_nav_right.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil-JzZ7TtsvRD3JPoR-TE4k_DSw8wcCsRlAhNd0qNNG5StLWCi11c41MYDadrM2WoG_eEMQ7ijSUvvSjZqjUpcEdqBzE5lJVdcqpg0kfmO-WBLnk1kwCbe7dsDhbLUiRvGCq9b1xmFDDo/s1600/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
.fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZnP9XifKyV38tgYx20kasA4i95cLMnxkfOusm8iuou-a0b9HDLbSrfvZNM00YU785a85o58qIDMx57T1wkHYDvgCa0bPcPBWT0iC2FQ0QhCmU2skerG1th0UN7zrRJe3iQiI9I76KhWY/s1600/fancy_title_left.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCEWV3dVQc8e0uj3kgZBl55vZsUkcidHw8aiEY-OJMQWA1A_hDElXg_i73SfFV7Sv1BZQmL3jbgxTqpDiHx9aFcsA_R_4wCgA_Rcr2Mo6uO7YZ62r_zyESsokAhiYFZZ_95Zq_8LU7GQo/s1600/fancy_title_main.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFvlXFO71lz9ZsfNrMmwCEMNl9v6j9EasyPlAVQyuCRAiPcFx4s11pPN33h2d06WQ2NgUMsmhNY0ZmRVlC-c_RVhPkRmx8ax0Tl0aav9lJaqjM3Z0BUAfZ0ncfTfZ_v-33YLTaqmaNN_0/s1600/fancy_title_right.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {
height: expression(this.parentNode.clientHeight "px");
}
#fancybox-loading.fancybox-ie6 {
position: absolute; margin-top: 0;
top: expression( (-20 (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) 'px');
}
#fancybox-loading.fancybox-ie6 div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZB3u9lGqGaQGqJctWz7XcZVX3FgvahK9YAWcqexe3N6Z4A1EugbFLGXLmjBnNzcaB9UoYBKQR0_htz-FO7sWx-wHI0L8lyLn1GZ6WqVsDyCDO-xezFQ97x5jlqWtLs1b7V37Fj7CgfdU/s1600/fancy_loading.png', sizingMethod='scale'); }
/* IE6, IE7, IE8 */
.fancybox-ie .fancybox-bg { background: transparent !important; }
.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSUVXH1QFVZZW91QPXFSJr_L7I8rAa8WgtMGPla4HfZmcuG0K4oOH_AbEYPI0UBFM_vZ24bn2KSr8hjAADr5RfkR168qUMo8DszI69K9jRAGCAL-91S5UShILMboqMOc882sIsk8GUr3w/s1600/fancy_shadow_n.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUaOvbfxYstMV4reKBlFsYefP31sBREExEK157-yOYmOcqS0PZK275K_5W0By48E6_qu9UlnPETkAfZmXNLiGYSkpmdt9wbVX18bA-2YoKiZQaaCOnTLzlNlZ5DEe2xI7Enynhz5s_SR8/s1600/fancy_shadow_ne.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiviPis7TVA2SJ2PU_-RxsGDFwd403vUfXbeE3eVfLZ297w4FoPpybKs6LA0_oaUjRi8fADsdpjbzqh3ZKYnouEjf5bzq8gI6PBDb2uXURJWe70dm5cB_LScDGDTAFlrbXV7n63Xiggwfc/s1600/fancy_shadow_e.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeG6xEBJwWa1-IhGG2RRbAdx3pZqJkNQB3E0owkAenfM6aNlrGO5si7iWXQvzPp2mle5RmfKKjt4Z42LboAprQMACPPnoi1Vk-3vewjBmNfQaQznhB0Yb-Ch69KrozEokLwsa5wCxjmi8/s1600/fancy_shadow_se.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIzGfbI8Al-ynSc92UtI-5zP50f_NHpjILB6SaQhSU5Z08zqlBlZN6Cqh7huDPyRwJjOaoohvXc_OunFX5ozsYDRmEQXb3nwj5KQXH12gZgaHhSUUfVBi4OLiT6cnMFAfCNbKLq9QKU44/s1600/fancy_shadow_s.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjuiRYColI4x3q_0UJDmcIM3ICBDidPeV8AZNzAJViyGfBNZsj2N16dmGZPUxYaSNvSBbAvAGqNajxczPORFivrl7OjEJ18qV3vGI5RrT-VIHybV0W-QRkJrmEh1FfRZG-GCVpTL6orGc/s1600/fancy_shadow_sw.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeAgZNfAgz9RBimEGO0kgZwf9UcChEbsCAVAEzOGD61FBXre5YaAVgIBmutzT-QVZdNywwgzMfY9O3LsdI6FGPzPPgv4TdlVEI3qp9euuNSAzb9GR7kL4tWM75s5EDvbJXi-j1-tSaCsU/s1600/fancy_shadow_w.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirity5WPk3gBja2j09kXHNTUy16s5mbNu_EB7gI41fYAufZDbvcJ-uStTyfPQScgdJcNcnNbwuy2Uc15hVexspYgR6KT2Y4vjPePUhgOZbgs1-zToEXXhvla3sZTh47yMDtLVWPDKTkKo/s1600/fancy_shadow_nw.png', sizingMethod='scale'); }
</style>
- Now post below script above </body> :
<script type="text/javascript">Done with all script now time to show how to add this on your content :
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnOverlayClick': false
});
/* Apply fancybox to multiple items */
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
$("#iframe").fancybox({'width': '70%','height': '100%','autoScale': true,'type':'iframe', });
$("#swf").fancybox({'width': '680','height': '495','autoScale': true,'type':'swf', });
});
</script>
Image :
<a id="single_image" href="Image URL"><img src="Image URL" alt="Some Text"/></a>
Image Group :
<a class="group" rel="group1" href="Image URL"><img src="Image URL" alt="Some Text"/></a>
<a class="group" rel="group1" href="Image URL"><img src="Image URL" alt="Some Text"/></a>
<a class="group" rel="group1" href="Image URL"><img src="Image URL" alt="Some Text"/></a>
Inline Content :
<a id="inline" href="#data">This shows content of element who has id="data"</a>
<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
iFrame :
<a href="http://google.com/" title="Google" id="iframe">some link text</a>
Flash :
<a href="SWF File Source/" title="Flash" id="swf">Flash</a>
In Second script which you posted above </body> you can change your iframe width and height and create more actions of iframes/groups and all content.
Now it was bit difficult but if you need any help then please comment and if this lightbox doesn't work then try to posting all script in your post instead of template.
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
