talk: Dorband on Dynamically Reconfigurable Layered Filesystem, 3/8
Dynamically Reconfigurable Layered Filesystem (DLFS)
Dr. John Dorband
Research Associate Professor
Computer Science and Electrical Engineering
University of Maryland, Baltimore County
1:00pm Friday, 8 March 2013, ITE 227, UMBC
The standard filesystem paradigm is based on a hierarchy of directories and files. The Dynamically reconfigurable Layered Filesystem (DLFS) adds a new dimension to filesystem organization that of filesystem layers and the ability to make custom configuration of them. The DLFS filesystem consists of many layers where each layer is mounted transparently on the root, ‘/’, directory. It is dynamic in the sense that every user can have a customizable list of layers that are included in a personalized view of the filesystem. We present in here the concept of a dynamically reconfigurable layered filesystem. We also present how it can be used, such as how it facilitates security and system management.
Dr. John E. Dorband received his PhD in Computer Science from Penn State University in 1985. He worked for NASA GFSC from 1985 until 2007. He currently is a Research Associate Professor at UMBC. Dr. Dorband was one of the builders of the first Beowulf system, constructed at GSFC in the fall of 1994. In the 80’s, he pioneered work in the generalized use of extremely parallel SIMD fixed-routing grid architectures through the use of sorting to implement generalized routing methods. This facilitated such application areas as image processing, graphics rendering, symbolic processing, database operations, and other irregular applications on parallel architectures that lacked generalized routine hardware. Dr. Dorband has been an innovator in the area of parallel programming language paradigms as a means of simplifying the implementation of applications on parallel computers. His professional specialties include designing and prototyping high-performance computer architectures; designing and implementing languages for simplified implementation of applications on parallel computers; designing and implementing algorithms for parallel computers; applying highly parallel architectures to image processing, signal processing, and data processing; and applying highly parallel architectures to computational science.
]]>
Dynamically Reconfigurable Layered Filesystem (DLFS) Dr. John Dorband Research Associate Professor Computer Science and Electrical Engineering University of Maryland, Baltimore County...
http://www.csee.umbc.edu/2013/03/talk-dorband-on-dynamically-reconfigurable-layered-filesystem-38/
https://my3.my.umbc.edu/api/v0/pixel/news/25305/guest@my.umbc.edu/cd5a8a55ce0b06de1b773946e3468119/api/pixel
news
talks
Computer Science and Electrical Engineering
https://my3.my.umbc.edu/groups/csee
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/099/d117dca133c64bf78a4b7696dd007189/xsmall.png?1314043393
https://assets1-my.umbc.edu/system/shared/avatars/groups/000/000/099/d117dca133c64bf78a4b7696dd007189/original.png?1314043393
https://assets1-my.umbc.edu/system/shared/avatars/groups/000/000/099/d117dca133c64bf78a4b7696dd007189/xxlarge.png?1314043393
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/099/d117dca133c64bf78a4b7696dd007189/xlarge.png?1314043393
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/099/d117dca133c64bf78a4b7696dd007189/large.png?1314043393
https://assets1-my.umbc.edu/system/shared/avatars/groups/000/000/099/d117dca133c64bf78a4b7696dd007189/medium.png?1314043393
https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/099/d117dca133c64bf78a4b7696dd007189/small.png?1314043393
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/099/d117dca133c64bf78a4b7696dd007189/xsmall.png?1314043393
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/099/d117dca133c64bf78a4b7696dd007189/xxsmall.png?1314043393
Computer Science and Electrical Engineering
0
0
true
Wed, 06 Mar 2013 09:55:48 -0500
HTML5/CSS3 Image Thumbnail Gallery with Lightbox Effect
The fading lightbox interface has become a staple in many website layouts. This dynamic script was originally based off Lightbox as a pure JavaScript library. Open source developers eventually start playing around with these codes to generate new designs, plugins, and animation styles.
In this tutorial I want to demonstrate how we can use a jQuery Lightbox plugin to spruce up dynamic image galleries. You can find the documentation at this jQuery lightbox webpage created by Leandro Vieira Pinho. The plugin is open source and free to add onto any web project. There are also parameters you may edit for customizing the default features.
Constructing the Webpage
I will be adding all the image codes into an unordered list of items. These will contain an anchor link which leads to the full-size image, along with an image thumbnail. First we should take a peek at the header section. Download a copy of the plugin and extract all the files.
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Lightbox Image Thumbnail Gallery</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://teamtreehouse.com/assets/favicon.ico">
<link rel="icon" href="http://teamtreehouse.com/assets/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.lightbox-0.5.css">
<link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Lato|Skranji:700">
<script type="text/javascript" charset="utf-8" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.lightbox-0.5.min.js"></script>
</head>
We need the core plugin file named jquery.lightbox-0.5.min.js along with the customized CSS stylesheet jquery.lightbox-0.5.css. I have split up these resources into their own folders and kept everything hosted locally. Be sure to include a copy of the latest jQuery library before including the lightbox JS file. Additionally I am using a few custom web fonts to spice up the page design.
Now I should clarify that I purposefully split up two different galleries into the same HTML page. I want to demonstrate that we can build any number of different lightbox galleries together by generating them in unique lists. More specifically I have used the rel attribute on each anchor link to differentiate between the galleries.
<div class="photos">
<ul class="clearfix">
<!-- ATTRIBUTION: http://dribbble.com/shots/963800-New-App-design -->
<li><a href="images/photos/01-app-design-iphone.png" rel="lightbox" title="Designed by <a href='http://dribbble.com/shots/963800-New-App-design' target='_blank'>Natalia Berowska</a>"><img src="images/photos/01-app-design-iphone-thumb.png" width="150" height="150"></a></li>
<!-- ATTRIBUTION: http://dribbble.com/shots/963671-Navigation -->
<li><a href="images/photos/02-ios-side-navigation.png" rel="lightbox" title="Designed by <a href='http://dribbble.com/shots/963671-Navigation' target='_blank'>Matt D. Smith</a>"><img src="images/photos/02-ios-side-navigation-thumb.png" width="150" height="150"></a></li>
I’ve copied over the codes for just the first couple of list items in my top gallery example. Notice how each link is using the rel value of “lightbox” to encapsulate all the images together in one gallery. Also the title attribute will be appended into the lightbox footer – and in this scenario I am using internal anchor links for clickable references back to the image source.
Styling the Photo Galleries
Both of the unordered lists are contained inside a div with the class .photos. This will make styling much easier because we only need to write a single set of CSS rules. The images are given a lower opacity and will apply CSS3 transitions for an animated hover effect.
/* gallery display */
.photos {
display: block;
}
.photos ul { list-style: none; }
.photos ul li { display: inline; }
.photos ul li a {
display: block;
float: left;
padding: 4px;
margin-right: 10px;
margin-bottom: 7px;
opacity: 0.75;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.photos ul li a:hover {
opacity: 1.0;
}
.photos ul li a img {
border: 6px solid #e1d9ec;
}
Most of the codes are straightforward if you are familiar with CSS3 designs. But there is one small bug I need to mention which is fixed at the very bottom of the stylesheet. My custom resets will force all elements into the border-box sizing parameters. This means any extra padding will be kept inclusive, not tacking on additional width/height. But we need this additional space to for captions to display properly.
/* lightbox hacks */
#lightbox-container-image-data-box {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/** uncomment to remove lightbox captions
*
#lightbox-container-image-data-box {
display: none !important;
}
*
**/
The top selector will reset the entire lightbox data container to be using content-box. This is the default setting in all browsers which will force additional pixels via margins or padding. Additionally I have a commented a block of code which is used to hide the caption altogether.
Some users will not want to even bother with the bottom caption area. It takes another second or two for the captions to animate, plus they may not really be useful in all circumstances. By adding display: none; onto the whole caption container we will never see it appear on any lightbox. Just uncomment this block of code and the effect should work perfectly.
jQuery Methods
Onto the final piece of our tutorial which goes into calling the function method via jQuery. You can find all the basic information on the plugin’s homepage but I have also copied over my own codes below. You should add this JS block into a <script> tag just before closing the page body.
<script type="text/javascript">
$(function(){
$('a[rel=lightbox]').lightBox({
containerResizeSpeed: 250,
fixedNavigation: true
});
$('a[rel=2ndlightbox]').lightBox({
overlayBgColor: '#fff',
overlayOpacity: 0.7
});
});
</script>
Note that the jQuery selector could be almost anything which targets the internal anchor links. We could apply a unique ID onto each photo div and use a selector like $('#photos1 a'). I just prefer the rel="" attribute because it doesn’t depend on a certain HTML container. Even if the anchor links are not inside a photo div, they will still appear in the slideshow if they are using the same rel value.
The actual function parameters are a bit more complicated and may not even require customization. I have passed a series of different parameters into each of the lightboxes. The first gallery attaches fixed navigation elements and speeds up the animation time. And the 2nd gallery will change the background color to white, just to demonstrate a contrast between the default option.
$(function() {
$('a[@rel*=lightbox]').lightBox({
overlayBgColor: '#fff',
overlayOpacity: 0.6,
fixedNavigation: false,
imageLoading: 'images/loading.gif',
imageBtnClose: 'images/close.gif',
imageBtnPrev: 'images/prev.gif',
imageBtnNext: 'images/next.gif',
containerResizeSpeed: 350,
txtImage: 'Imagem',
txtOf: 'de'
});
});
This code block is more of a template which contains all the major default parameters. You’ll find all this content in the documentation as well. It is fairly straightforward and you can have a lot of fun toying around with different values. Try out my live demo and see how you feel about the open source jQuery lightbox plugin.
Live Demo – Download Source Code
Final Thoughts
I hope this tutorial may prove to be useful for at least a few developers. Adding your own custom lightbox effect will require a bit of studying. But it is not an overly complex topic which requires days to implement. You mostly want to ensure that you are using the right plugin for the job. And for anybody who needs a bare-bones minimalist plugin for image showcases – I will have to recommend this jQuery lightbox on any project.
The post HTML5/CSS3 Image Thumbnail Gallery with Lightbox Effect appeared first on Treehouse Blog.
]]>
The fading lightbox interface has become a staple in many website layouts. This dynamic script was originally based off Lightbox as a pure JavaScript library. Open source developers eventually...
http://feedproxy.google.com/~r/teamtreehouse/~3/Oes98_Y67jo/html5css3-image-thumbnail-gallery-with-lightbox-effect
https://my3.my.umbc.edu/api/v0/pixel/news/25790/guest@my.umbc.edu/384a818973bab4dfef4820289963cfa0/api/pixel
android
css
css3
design
development
html
html5
html5-image-gallery-tutorial
image-gallery
ios
javascript
lightbox-gallery-tutorial
make-a-website
responsive
web
Web Developer - Build Group
https://my3.my.umbc.edu/groups/retired-583
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197
Web Developer - Build Group
0
0
true
Wed, 06 Mar 2013 09:30:46 -0500
