Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

April 24 2012

13:00

Visual LightBox Giveaway: 5 Commercial Licenses for Unlimited Websites

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

Visual LightBox is a jQuery Image Gallery with beautiful Lightbox-style overlay effect and a lot of nice gallery templates. Visual LightBox comes with drag&drop GUI wizard for Mac and Windows to create your gallery in just a couple of clicks – without coding or image editing.

For this week, Visual LightBox is giving away 5 commercial licences of their elegant image gallery slider with a nifty lightbox-style effect. Perfect for photographers, graphic designers, and just about any artists out there looking for beautiful ways to present their works!

The Giveaway

Visual LightBox includes several templates that you can choose from, depending on your mood or taste. See below for three of the latest additions.

In Action

See demo here!

And of course like everything else, it has a free version that you can try right now. Download the free version now!

Behind the Scenes

Below is a screenshot of how Visual LightBox works behind the scenes. As you can see, it is only a matter of adding the images you want to use for the image slider, totally without requiring you to code!

Key Features:

  • GUI wizard for Mac and Windows – no coding
  • Beautiful templates and effects
  • Slideshow with autostart option
  • jQuery powered
  • Degrades gracefully when Javascript is off
  • Search engine friendly
  • Clean and valid markup
  • Cross-browser compatibility
  • Flickr, PhotoBucket, Picasa support
  • Automatic thumbnail creation
  • Visual insert-to-page
  • Built-in FTP
  • Sort, rotate, resize images
  • Translated to 31 languages

How to Win:

  • Comment below on what you think about this product – use your real email so that we can contact you in case you win!
  • Like, Tweet, and +1!

Winners will be selected using Random.org and will be announced exactly a week from now.

Good luck!

November 18 2010

10:00

30 Awesome Ajax Lightbox and Modal Dialog Solutions

Modal Dialog and Lightbox are Ajax solutions for displaying the content inside the browser without reloading the whole page. Lightboxes overcome the use of the pop up window to suit on the modern browsers and it is being used everywhere these days.  It is widely used for  displaying of media files, webpages , messages, forms etc in a nice looking overlay.

In this post, I’ll be featuring 30 awesome lightbox and modal dialog boxes that you can use on you web applications.

1. Facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes.

2. Lightbox2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

3. Fancybox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

4. Colorbox

A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4. Supports photos, grouping, slideshow, ajax, inline, and iframed content.

5. jQuery Lightbox Plugin

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

6. prettyPhoto

prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes.

7. Litebox

Lightweight lightbox which built on moo.fx and prototype.lite.

8. Thickbox

It has more features than lightbox2  like display inline content, iframed content or content served through ajax in a hybrid modal.

9. Slimbox

It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.

10. LightView

Lightview was built to change the way you overlay content on a website that supports multiple media files.

11. jQuery Dialog

Query UI contains dialog component. It can be customized to create your own taste of image preview or gallery.

12. Prototype Window

Prototype window based dialog boxes.

13. MochaUI

MochaUI is a web applications user interface library built on the Mootools JavaScript framework.

14. Boxy

Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening.

15. ModalBox

It’s inspired by Mac OS X modal dialogs.

16. Shadowbox

Shadowbox is a web-based media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable.

17. LightWindows

A lightbox solutions that enable you to embed images, video,iFrame, flash and more.

18. SimpleModal

impleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.

19. jqModal

jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a “Swiss Army Knife”, and makes a great base as a general purpose windowing framework

20. Multibox

It support images,flash, video, mp3 and html and it is built with mootools.

21. Greybox

GreyBox can be used to display websites, images and other content in a beautiful way.

22. Highslide

Highslide JS is an image, media and gallery viewer written in JavaScript. It has a quick and elegant looking.

23. Sexybox

Lightbox that display content directly from html.

24. PiroBox

Stylish and modern jquery lightbox.

25. Super Box

Super Box is a script which allows you display windows with the lightbox effect.

26. CeeBox

It is an overlay popup script that embeds flash video, display images, or show html.

27. NyroModal

Modal box that uses callback animation and a lot more features.

28. imgBox

mgBox is a jQuery plugin that implements a smooth zoom effect on images.

29. ClearBox

Clearbox is a professional image and content viewer overlay window.

30. jQuery Tools

jQuery Tools is a collection of most user interface components for modern websites such as lightboxes.

Choose the appropriate lightbox or modal box on your website.  Next time your users visit they will be attracted on these modern trend and design for your website.

September 27 2010

07:00

Basic Beginners’ Guide to Installing a jQuery Lightbox

Have you always wanted to add those cool Javascript lightbox galleries to your website, but haven’t the first clue about how to do so? This guide is aimed at the Javascript coding noob and will take you through the step by step process of linking up the jQuery library, installing the lightbox script and getting everything working.

View the jQuery lightbox demo

View the jQuery lightbox gallery demo

We all start from the basics when learning the various coding languages in our web design careers. There’s all kinds of intermediate and advanced tutorials describing how to create awesome stuff with Javascript, but sometimes the very basics are hard to find. Installing a lightbox gallery script is probably one of the most common tasks a Javascript noob is likely to attempt on their website, and is probably most people’s introduction to the world of Javascript libraries and plugins. This little tutorial is for those people who want to add the functionality of a lightbox, but haven’t the first clue about how to do so.

jQuery is my Javascript library of choice so this will be the base of today’s tutorial. The jQuery syntax is quite similar to CSS and is pretty straight forward, making it easy for beginners to learn. What’s more, due to its popularity there’s stacks of cool, ready-made plugin scripts that you can use to easily add to your website and impress your friends.

Lightbox galleries

There’s stacks of jQuery lightbox scripts available on the web. Some support just images, some support video and inline HTML. All we need today is basic image support, so I’m using the trusty jQuery lightbox script from leandrovieira.com.

Before we start – The basic HTML and CSS

Before adding any kind of Javascript to your site, you should build the structural HTML and have everything styled up with CSS. Javascript is used to enhance your website, but it should also work perfectly well without it albeit without as much glamour.

<div id="wizards">

	<ul>
		<li><a href="images/dumbledore.jpg"><img src="images/dumbledore-sm.jpg" alt="Dumbledore" /></a></li>
		<li><a href="images/merlin.jpg"><img src="images/merlin-sm.jpg" alt="Merlin" /></a></li>
		<li><a href="images/gandalf.jpg"><img src="images/gandalf-sm.jpg" alt="Gandalf" /></a></li>
		<li><a href="images/harry-potter.jpg"><img src="images/harry-potter-sm.jpg" alt="Harry Potter" /></a></li>
	</ul>

</div>

An Unordered List is the perfect element to use for any kind of image gallery. Inside each <li> item the images are linked up with basic anchors. I’ve already exported large and thumbnail sized versions of each image, so the anchor links to the large version, then an image tag is used to display the thumbnail version.

This guide is aimed at the designer who is confident with their HTML and CSS ability and is looking to polish their skills with a spot of basic jQuery. If you’re stuck at this stage I’d suggest going back and concentrating on the basics of HTML and CSS before tackling anything Javascript related.

body, ul, li, img {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #545454 url(images/bg.png);
}

#wizards {
	width: 500px; margin: 200px auto;
}

#wizards li {
	list-style: none; float: left; margin: 15px;
}

	#wizards a img {
		border: 5px solid #aaa;
	}
		#wizards a:hover img {
			border: 5px solid #75879d;
		}

The CSS for my demo gallery is pretty simple. I just have a background image repeating across the page body, then the gallery is enclosed within the #wizards div and centred up on the page. Each list item has its default bullet point removed with list-style:none;, is floated left an spaced out with a spot of margin. The image inside every anchor is given a 5px border, which changes colour on hover to provide a visual clue that the image is clickable.

Basic gallery layout

If you test your page at this stage everything should work perfectly fine, although the larger images will simply open in a blank page. Which is ugly and boring. Let’s get to the fun jQuery part!

Installing the jQuery files

jQuery.com

jQuery is a Javascript library which takes the difficultly out of writing Javascript. To use it we have to link up a jQuery file from the HTML. Download the library from jQuery.com and place it in a folder named ‘js’ in your local file directory. If the code appears in your browser window when downloading the file, simply copy it and paste it into a blank document in your code editing app of choice. Save the file as jquery.js.

<script type="text/javascript" src="js/jquery.js"></script>

In your HTML document reference the file using the script tag, this could be before the closing </head> tag, or the closing </body> tag at the bottom of the page. Make sure you have the path to the jQuery file written correctly. Now jQuery has been added to your web page you can add as many ready-made plugins or write as much custom jQuery to spice up your site as you wish.

jQuery lightbox

Next we need to download the handy lightbox script file from leandrovieira.com. The zip comes packed with various files, but we don’t need them all. Copy the jquery.lightbox-0.5.min.js file from the js folder into your own js folder. I tend to trim down the name to jquery-lightbox.js for ease. Next, copy all the images from the images folder. I tend to paste these into the js folder rather than my images folder as they’re Javascript specific. Finally you’ll need the jquery.lightbox-0.5.css file – You can either reference this as a separate CSS file from your HTML, or paste all the contents at the bottom of your current CSS file (which is style.css in my case).

Editing lightbox image paths

If you moved the images from the lightbox package into a different folder, you may need to change the paths inside the lightbox Javascript file. Open it up in a code editor and change the urls in the first couple of lines.

Activating the plugin

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-lightbox.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>

The plugin files are now installed and ready to use but they won’t do anything unless they’re told. We now need to write a line or two of our own jQuery to get things working. It’s useful to keep your own Javascript separate from plugin files, so create a new document called sripts.js and reference it underneath the jQuery library and the plugin file in your HTML document.

$(document).ready(function() {

});

Every jQuery command must be surrounded by a line of code that says ‘when the document is ready, do this’. Inside the scripts.js file add the above code.

$(document).ready(function() {
	$("#wizards a").lightBox();
});

Now to get the lightbox working you need to target a particular element, but there’s a range of different methods to do so. The easiest in this case would be to target the anchor inside the #wizards div.

If you have other galleries on the same page, they wouldn’t be targeted by the lightbox script because they would have different names (at least they should be as IDs can only be used once!). Alternatively you could add a class to each gallery list and target them all like so $(".gallery a").lightBox();.

$(document).ready(function() {
	$("a[href$=.jpg]").lightBox();
	$("a[href$=.gif]").lightBox();
	$("a[href$=.png]").lightBox();
});

One trick I employ on my sites is to use attribute selectors to target every link to a JPG, PNG or GIF file on the page. Every linked image will then display in a popup lightbox gallery automatically.

The finished working lightbox gallery

View the jQuery lightbox demo

Your jQuery powered gallery should now be working perfectly. Check out my little demo to see it in action.

View the jQuery lightbox gallery demo

January 05 2010

15:29

December 29 2009

23:55

The Best jQuery Lightbox Scripts


Eversince, Lokesh Dhakar created the first lightbox application, photo galleries and popup windows advanced to new era. And there was a time that lightboxes become a default component for every web sites. Aside from their libraries and codebase, all of them has similar properties like ability to show single image or group of images with next and previous buttons for navigation, captions and different transition effects mostly depending on mighty jQuery easing plugin.

Opens on the very top of the page texts with a transparent overlay background. In addition to images, also they can display inline elements, iframes, use ajax for its contents, flash or other video types. Many of them have slick css implementation for their user interfaces. So this helps to change their interfaces according to your website easily. In this post I want to propose to you a roundup with 15 of the best and most popular jQuery Lightbox Scripts.

CeeBox

CeeBoxCeeBox is a very customizable and extensive lightbox clone. In addition to images, it can display iframes, inline element, ajax, flash and videos. Note that, it need swfobject plugin to display flash.

ColorBox

ColorBoxColorBox is very customizable like CeeBox and have a set of transition effects. It can display most of the content types. It also has different built-in themes both for overlay background and lightbox interface.

Faceboox

FaceBoxFacebox is facebook’s lightbox clone. It only display single images without captions, ajax and inline content.

FancyZoom

Fancy ZoomFancy Zoom for jQuery: original Cabel Sasser’s FancyZoom replica for jQuery. It can display single image, flash and inline content.

FancyBox

FancyBoxFancyBox is a simple gallery plugin for jQuery. It display most content types but lacks flash and video support. It also has different transition effects.

Greybox Redux

Greybox ReduxGreybox Redux is simplified version of original Greybox. It can only display iframe content.

ImageBox

ImageboxImagebox specialized for image displaying. It only supports single and group of images.

jQuery Lightbox

jQuery LightboxLike to Imagebox, jQuery Lightbox is also only-show-image type lightbox clone. Its user interface and usage is very similar to Lokesh Dhakar’s Lightbox2.

nyroModal

nyroModalnyroModal is one of the most extend-able lightbox clone. It display of the content types and also it allows form submits via its modal without extra plugins.

piroBox

piroBoxpiroBox is differs from the other lightboxes with ability to add link to current image file for. Also it has an auto slideshow option. It only supports single and group of images with 3 different built-in themes. Lacks closing the lightbox when clicking on the background overlay.

prettyPhoto

prettyPhotoprettyPhoto can display all content I mentioned at the intro paragraph. It has 5 different built-in themes but these themes slightly changes the lightbox interface.

Sexy Lightbox2

Sexy Lightbox2Sexy Lightbox2 has both jQuery and MooTools based versions. It has 2 different built-in themes as black and white. And opens lightbox with a slide down effect with easing.

Slightly ThickerBox

Slightly ThickerboxSlightly ThickerBox is a modification of Cody Lindley’s Thickbox script. It can display images and ajax content.

Thickbox

ThickboxThickbox is one of the oldest jQuery based lightbox. Its development team discontinued the plugin’s maintenance.

TopUp

topupDepended on both jQuery and jQuery UI. TopUp has different built-in themes. In addition to most content types, it can also display flv videos.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl