Permalink
Browse files

added slimbox support

  • Loading branch information...
1 parent 44fa742 commit 4a5a8659e8c23546e6f5fc429c0fa8f5bd5df55a @addyosmani committed Oct 9, 2010
View
@@ -139,7 +139,7 @@ font-family: 'TradeGothicLTStdBoldCondensed', sans-serif;
left: -45px;
top: -120px;
width: 100px;
- height: 100px;
+ height: auto;
text-align: center;
margin: 0 auto;
}
View
Binary file not shown.
View
@@ -28,10 +28,30 @@
#roundrr_caption {
font-size:24px;
}
+
+.roundrr_center, .roundrr_center img, .centerImage{
+ cursor:pointer;
+}
+
+
+
+#roundrr_container, #roundrr_container2{
+
+height:auto;
+}
+
+
+
</style>
<!--Include jQuery and jQuery roundrr dependancies-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+
+ <!-- Include Slimbox-->
+ <script type="text/javascript" src="lightbox/js/slimbox2.js"></script>
+ <link rel="stylesheet" href="lightbox/css/slimbox2.css" type="text/css" media="screen" />
+
+ <!-- Include Roundrr -->
<script type='text/javascript' src='../../scripts/ui/jQuery.roundrr.js'></script>
<!-- Include Demo app code -->
@@ -59,13 +79,16 @@
<!-- central image -->
<div class="roundrr_center">
+
</div>
<!-- Speech bubble for captions -->
<div class="roundrr_speech">
</div>
+
+
<!-- actual caption text -->
<div id="roundrr_caption">
</div>
@@ -78,6 +101,7 @@
<li class='item'>
<div class='my_class'>
+
<img alt="Al Yankovic" src="http://a0.twimg.com/profile_images/246073324/IL2_bigger.jpg"></img>
</div>
</li>
@@ -162,6 +186,7 @@
+
@@ -178,6 +203,7 @@
+
</body>
View
@@ -3,6 +3,8 @@ jQuery(document).ready(function()
var currentImage = "";
var interfaceLock = false;
+
+
jQuery("#roundrr_container").roundrrwheel(
{
@@ -29,13 +31,13 @@ jQuery(document).ready(function()
onNextBegin: function($m)
{
- //interfaceLock = true;
+ interfaceLock = true;
},
onPrevBegin: function($m)
{
- //interfaceLock = true;
+ interfaceLock = true;
},
//once an image has moved under the 'pick'
@@ -55,12 +57,15 @@ jQuery(document).ready(function()
onAnimationComplete: function($menu)
{
+
jQuery('.centerImage').attr('src', currentImage);
jQuery('.centerImage').load(function()
{
interfaceLock = false;
});
+
+
},
@@ -91,27 +96,43 @@ jQuery(document).ready(function()
interfaceLock = true;
var thisImage = $i.find('img');
- var focusedImage = thisImage.attr('src');
- var largerImage = focusedImage.replace('_bigger', '');
+ var imageSrc = thisImage.attr('src');
+ var largerImage = imageSrc.replace('_bigger', '');
var imageCaption = thisImage.attr('alt');
var speechBubble = jQuery('.roundrr_speech');
- speechBubble.fadeIn();
+
+ var captionObject = jQuery('#roundrr_caption');
+ var centeredImage = jQuery('.centerImage');
+ var centerObject = jQuery('.roundrr_center');
+
+ speechBubble.fadeIn();
currentImage = largerImage;
- jQuery('#roundrr_caption').fadeIn();
- jQuery('#roundrr_caption').html(imageCaption);
+ captionObject.fadeIn();
+ captionObject.html(imageCaption);
+
+
+ /*utilize the slimbox API for lightbox triggering*/
+ centerObject.bind('click', function()
+ {
+
+ jQuery.slimbox(largerImage, imageCaption, { overlayOpacity:0.6});
+
+ });
+
if(mode=='noanim')
{
- jQuery('.centerImage').attr('src', currentImage);
- jQuery('.centerImage').load(function()
+ centeredImage.attr('src', currentImage);
+ centeredImage.load(function()
{
interfaceLock = false;
});
}
-
+
+
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,84 @@
+/* SLIMBOX */
+
+#lbOverlay {
+ position: fixed;
+ z-index: 9999;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #000;
+ cursor: pointer;
+}
+
+#lbCenter, #lbBottomContainer {
+ position: absolute;
+ z-index: 9999;
+ overflow: hidden;
+ background-color: #fff;
+}
+
+.lbLoading {
+ background: #fff url(loading.gif) no-repeat center;
+}
+
+#lbImage {
+ position: absolute;
+ left: 0;
+ top: 0;
+ border: 10px solid #fff;
+ background-repeat: no-repeat;
+}
+
+#lbPrevLink, #lbNextLink {
+ display: block;
+ position: absolute;
+ top: 0;
+ width: 50%;
+ outline: none;
+}
+
+#lbPrevLink {
+ right: 0;
+}
+
+#lbPrevLink:hover {
+ background: transparent url(prevlabel.gif) no-repeat 100% 15%;
+}
+
+#lbNextLink {
+ left: 0;
+}
+
+#lbNextLink:hover {
+ background: transparent url(nextlabel.gif) no-repeat 0 15%;
+}
+
+#lbBottom {
+ font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
+ font-size: 10px;
+ color: #666;
+ line-height: 1.4em;
+ text-align: right;
+ border: 10px solid #fff;
+ border-top-style: none;
+ direction: rtl;
+}
+
+#lbCloseLink {
+ display: block;
+ float: left;
+ width: 66px;
+ height: 22px;
+ background: transparent url(closelabel.gif) no-repeat center;
+ margin: 5px 0;
+ outline: none;
+}
+
+#lbCaption, #lbNumber {
+ margin-left: 71px;
+}
+
+#lbCaption {
+ font-weight: bold;
+}
@@ -0,0 +1,88 @@
+/* SLIMBOX */
+
+#lbOverlay {
+ position: fixed;
+ z-index: 9999;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #000;
+ cursor: pointer;
+
+}
+
+#lbCenter, #lbBottomContainer {
+ position: absolute;
+ z-index: 9999;
+ overflow: hidden;
+ background-color: #fff;
+ margin-top:-200px;
+ margin-left:-50px;
+}
+
+.lbLoading {
+ background: #fff url(loading.gif) no-repeat center;
+}
+
+#lbImage {
+ position: absolute;
+ left: 0;
+ top: 0;
+ border: 10px solid #fff;
+ background-repeat: no-repeat;
+
+
+}
+
+#lbPrevLink, #lbNextLink {
+ display: block;
+ position: absolute;
+ top: 0;
+ width: 50%;
+ outline: none;
+}
+
+#lbPrevLink {
+ left: 0;
+}
+
+#lbPrevLink:hover {
+ background: transparent url(prevlabel.gif) no-repeat 0 15%;
+}
+
+#lbNextLink {
+ right: 0;
+}
+
+#lbNextLink:hover {
+ background: transparent url(nextlabel.gif) no-repeat 100% 15%;
+}
+
+#lbBottom {
+ font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
+ font-size: 10px;
+ color: #666;
+ line-height: 1.4em;
+ text-align: left;
+ border: 10px solid #fff;
+ border-top-style: none;
+}
+
+#lbCloseLink {
+ display: block;
+ float: right;
+ width: 66px;
+ height: 22px;
+ background: transparent url(closelabel.gif) no-repeat center;
+ margin: 5px 0;
+ outline: none;
+}
+
+#lbCaption, #lbNumber {
+ margin-right: 71px;
+}
+
+#lbCaption {
+ font-weight: bold;
+}

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 4a5a865

Please sign in to comment.