What is this jmFullWall?

jmFullWall is a jQuery plugin for the creation of an impressive portfolio.

Usage

/* javascript */
$("#wall").jmFullWall();
/* html */
	<div id="wall-top">YOUR LOGO / MENU</div>
	<div id="wall-container">
		<div id="wall-loading"></div>
		
		<div id="wall-detail"></div>
		<div id="wall">
			<div id="wall-items">	
				<div class="wall-item">
					<span class="bg hide">path/to/your/thumb/image</span>
					<span class="img_detail hide">path/to/your/fullscreen/image</span>
					<span class="tooltip hide">TOOLTIP (when click on item)</span>
					<a href="#"><span class="title">TEXT (onmouseover)</span></a>
				</div>
				[... your items ...]
			</div>
		</div>
	</div>

Demo

Requirements

• jQuery 1.4+
• jquery.imgpreload.js (thanks to Dimas Begunoff)
• jquery.imagepanner.js (thanks to Dynamic Drive)
• jmFullWall.js

Compatibility

• Mozilla Firefox
• Google Chrome
• Safari
• Opera
• IE8+

Options

• Key
  Default
  Description
• itemTransition
  fadeIn
  Set the transition of the thumbs. Can be set to "fadeIn", "show" or "slideDown".
• itemTransitionSpeed
  200
  Set the speed of the thumbs. Can be set to "slow", "normal", "fast" or milliseconds(eg. 1000).
• itemsForRow
  5
  Specific how many items for row.
• itemsBtnNext
  jmFullWall-next
  The classname of the next button selector.
• itemsBtnPrev
  jmFullWall-prev
  The classname of the prev button selector.
• itemsBtnClose
  jmFullWall-close
  The classname of the close button selector.
• detailTransitionIn
  fadeIn
  Set the transition when you open an image. Can be set to "fadeIn", "show" or "slideDown".
• detailTransitionInSpeed
  500
  Set the speed when you open an image. Can be set to "slow", "normal", "fast" or milliseconds(eg. 1000).
• detailTransitionOut
  fadeOut
  Set the transition when you close an image. Can be set to "fadeOut", "hide" or "slideUp".
• detailTransitionOutSpeed
  500
  Set the speed when you close an image. Can be set to "slow", "normal", "fast" or milliseconds(eg. 1000).
• showTooltip
  true
  Enable the tooltip when full image is loaded.
• imgPanning
  true
  Enable the panning of the image when is in fullscreen mode.
• imgPanningCenter
  true
  Centering the image when is in fullscreen mode.
• imgPanningZoom
  true
  Enable the zoom option when the image is in fullscreen mode.

Download & Donate

Comments & Support

ChangeLog

06 Aug 2011 - v1.0 - Released