Delay loading images until the GalleryView is initialized

README.md

@@ -0,0 +1,102 @@
+GalleryView - jQuery Photo Gallery Plugin
+Author: Jack Anderson
+
+INSTRUCTIONS FOR USE
+---------------------------------
+1. Place galleryview-x.x folder somewhere in your website directory structure (you can rename this folder if desired)
+
+2. Include script tags for the desired version of the script (uncompressed, packed) and for the included jQuery Timers and Easing plugin files
+
+3. Include a reference to the jquery.galleryview-x.x.css stylesheet in your document
+
+4. Create an unordered list in your HTML with the content you wish to be displayed in your gallery (see below for more information on markup options
+
+5. Add class "galleryView" to the unordered list to make it invisible at firt (in order to prevent a flash of unstyled content).
+
+6. Call the GalleryView plugin with the function call below:
+
+	```js
+	$('#id_of_list').galleryView()
+	```
+
+	To override default option values, include them in object literal format in the call to the plugin, like so:
+
+	```js
+	$('#id_of_list').galleryView({
+		panel_width: 800,
+		panel_height: 600,
+		frame_width: 120,
+		frame_height: 90
+	});
+	```
+
+	Refer to the uncompressed javascript to see a full list of options, their effects on the plugin and their default values.
+
+
+
+HTML MARKUP REQUIREMENTS
+---------------------------------
+Below, I will show you the markup required to produce various types of galleries. After the first example, 
+I will exclude the UL wrapper and only show the HTML necessary for a single panel and/or frame.
+
+1. Basic slideshow (no added features)
+
+	```html
+	<ul id="gallery" class="galleryView">
+		<li><img src="../gv/path/to/image1.jpg" alt="image1" /></li>
+		<li><img src="../gv/path/to/image2.jpg" alt="image2" /></li>
+		<li><img src="../gv/path/to/image3.jpg" alt="image3" /></li>
+		<li><img src="../gv/path/to/image4.jpg" alt="image4" /></li>
+	</ul>
+	```
+
+	This is the simplest gallery one can have. By default, the filmstrip will appear below the panels. The number of frames visible will be determined by the size of the panels. If there is enough space in the gallery to fit all the filmstrip frames, the filmstrip will be centered within the gallery. If there are too many frames, the additional frames will be hidden from view initially, appearing as the filmstrip slides to the left with each transition. Panel and frame dimensions are set via plugin options, as is the location of the filmstrip. It can be set to appear below, above, or to either side of the panels.
+
+2. Slideshow with custom thumbnails
+	```html
+	<li>
+		<img src="../gv/path/to/image.jpg" data-frame="../gv/path/to/thumb.jpg" alt="image" />
+	</li>
+	```
+
+	By adding a data-frame attribute with a relative or absolute path to a separate image, GalleryView will use it to populate the thumbnail. This can be helpful when using large panel images and small thumbnails to avoid degradation due to scaling.
+
+3. Slideshow with panel overlays
+	```html
+	<li>
+		<img src="../gv/path/to/image.jpg" alt="image" title="Pretty Picture" data-description="Some more information about the photo" />
+	</li>
+	```
+
+	For this gallery, the contents of the title and data-description attributes will display on top of the panel image, its position determined by the 'overlay_position' option. The color of the overlays are  set in the included CSS file.
+
+4. Slideshow with images delayed loading
+	```html
+	<li><img data-original="../gv/path/to/image1.jpg" src="../css/grey.gif" alt="image1" /></li>
+	<li><img data-original="../gv/path/to/image2.jpg" src="../css/grey.gif" alt="image2" /></li>
+	<li><img data-original="../gv/path/to/image3.jpg" src="../css/grey.gif" alt="image3" /></li>
+	<li><img data-original="../gv/path/to/image4.jpg" src="../css/grey.gif" alt="image4" /></li>
+	```
+
+	Put placeholder image into src attribute and store real image url in data-original attribute. The browser won't load the real images until the GalleryView is initialized (that is, when <code>$('#id_of_list').galleryView()</code> is called). This feature is inspired by the [Lazy Load Plugin for jQuery](https://github.com/tuupola/jquery_lazyload) by [Mika Tuupola](http://www.appelsiini.net/projects/lazyload).
+
+CREATING/USING CUSTOM NAVIGATION THEMES
+---------------------------------
+GalleryView comes with two themes by default:
+- dark
+- light
+
+The dark themes contain dark navigation buttons and are best used in galleries with light backgrounds. The light themes contain light colored images and are best for galleries with dark backgrounds. Both themes also contain oversized panel navigation buttons to demonstrate GalleryView's ability to use any kind of navigation images you may want to use.
+
+To create your own navigation theme, first create the following images:
+- next.png
+- prev.png
+- play.png
+- pause.png
+- panel-nav-next.png
+- panel-nav-prev.png
+
+The images can be of any file type. Then, update the galleryView CSS file with the paths to your new navigation images.
+
+
+That should hopefully be enough to get you started on the right track. Feel free to experiment and find me on twitter (@jackwanders) if you have any questions or comments. Enjoy!

css/jquery.galleryview-3.0-dev.css

@@ -8,8 +8,7 @@
 */
 
 /* GALLERY LIST */
-/* IMPORTANT - Change '#myGallery' to the ID of your gallery list to prevent a flash of unstyled content */
-#myGallery { display: none; }
+.galleryView { display: none; }
 
 .gv_galleryWrap { position: relative; background: #222; font-size: 10pt; }
 

demos/all-features.html

@@ -52,6 +52,17 @@
 		show_infobar: true,				//BOOLEAN - flag to show or hide infobar
 		infobar_opacity: 1				//FLOAT - transparency for info bar
 		});
+
+		var isDelayedGalleryInitialized = false;
+		$('#btn').click(function(){
+			if(!isDelayedGalleryInitialized){
+				$('.gv_galleryWrap').hide();
+				$('#delayedGallery').galleryView();
+				isDelayedGalleryInitialized = true;
+			}else{
+				$('.gv_galleryWrap').toggle();
+			}
+		});
 	});
 </script>
 
@@ -64,7 +75,7 @@
 </head>
 
 <body>
-	<ul id="myGallery">
+	<ul id="myGallery" class="galleryView">
             <li><img data-frame="http://www.spaceforaname.com/galleryview/img/photos/crops/bp1.jpg" src="http://www.spaceforaname.com/galleryview/img/photos/bp1.jpg" title="Lone Tree Yellowstone" data-description="A solitary tree surviving another harsh winter in Yellowstone National Park. Yellowstone National Park, Wyoming. (Photo and caption by Anita Erdmann/Nature/National Geographic Photo Contest) " />
             <li><img data-frame="http://www.spaceforaname.com/galleryview/img/photos/crops/bp2.jpg" src="http://www.spaceforaname.com/galleryview/img/photos/bp2.jpg" title="Is He Still There?!" data-description="One morning while on the Big Island of Hawaii, i exploring my surroundings to see if i could find something to photograph. I almost went back inside when something on this huge palm tree leaf caught my eye. I stayed around and it was this little gecko, startled by my presence he was hidden between the ridges of the leaf. He would pop his head up periodically to check his surroundings, as soon as he saw i was still there he would hide again. We played this game for a while until i got the shot. Holualoa big Island, Hawaii. (Photo and caption by Lorenzo Menendez/Nature/National Geographic Photo Contest)" />
             <li><img data-frame="http://www.spaceforaname.com/galleryview/img/photos/crops/bp4.jpg" src="http://www.spaceforaname.com/galleryview/img/photos/bp4.jpg" title="Noni Nectar For Green Gecko" data-description="Madagascar Gold Dust Day Gecko licking nectar from a young noni fruit in Kailua, Hawaii. These geckos were living all around the hale' we were staying in, enjoying the noni and basking on the railing and sunny steps to our place. They were very shy mostly, except this one must have enjoyed the nectar so much as to let me get a shot of their favorite activity. They seemed to tend the noni very attentively throughout the day. August 2010, Chandra S Sherin. Kona Village Resort, Kailua - Kona, Hawaii. (Photo and Caption by Chandra Sherin/Nature/National Geographic Photo Contest)" />
@@ -75,10 +86,13 @@
             <li><img data-frame="http://www.spaceforaname.com/galleryview/img/photos/crops/bp28.jpg" src="http://www.spaceforaname.com/galleryview/img/photos/bp28.jpg" title="Untitled" data-description="Children filled with happiness playing in the water. Brazil. (Photo and caption by Seth Solo/People/National Geographic Photo Contest)" />
             <li><img data-frame="http://www.spaceforaname.com/galleryview/img/photos/crops/bp41.jpg" src="http://www.spaceforaname.com/galleryview/img/photos/bp41.jpg" title="New Orleans Streetcar" data-description="This is a streetcar in New Orleans traveling back towards The Quarter on St. Charles Ave. I held the camera against the window sill, making sure to divide the image equally between the inside and the outside. New Orleans, Louisiana. (Photo and caption by Don Chamblee/Places/National Geographic Photo Contest)" />
             <li><img data-frame="http://www.spaceforaname.com/galleryview/img/photos/crops/bp49.jpg" src="http://www.spaceforaname.com/galleryview/img/photos/bp49.jpg" title="By The Wind of Chance" data-description="I was doing my touristic duties to photograph the Pyramids, and I hear my professor shouting. Next thing you know my entire class and some police officers were running to catch my professors hat. It actually wasn't until later that night when scrolling through my photos that I realized I captured this gem. Great Pyramid of Giza. (Photo and caption by John Head/Places/National Geographic Photo Contest)" />
-            <li><img data-frame="http://www.spaceforaname.com/galleryview/img/photos/crops/bp52.jpg" src="http://www.spaceforaname.com/galleryview/img/photos/bp52.jpg" title="Fishing on the Cloud" data-description="Anglers fishing in the mist rising from the reservoir by dawn look like fishing on cloud. Gosam reservoir, Anseong, Gyeonggi-do, Korea. (Photo and caption by Sungjin Kim/Places/National Geographic Photo Contest)" />
-            <li><img data-frame="http://www.spaceforaname.com/galleryview/img/photos/crops/bp53.jpg" src="http://www.spaceforaname.com/galleryview/img/photos/bp53.jpg" title="Blue Lagoon" data-description="Blue lagoon, Iceland. (Photo and caption by Maroesjka Lavigne/Places/National Geographic Photo Contest)" />
-            <li><img data-frame="http://www.spaceforaname.com/galleryview/img/photos/crops/bp54.jpg" src="http://www.spaceforaname.com/galleryview/img/photos/bp54.jpg" title="Time" data-description="An image with beautiful natural colours i was surveying for work when i found this moment and only got the one single shot due to the meeting with my client, the car and the climber was removed one week after the image was taken... UK. (Photo and caption by Simon Belham/Places/National Geographic Photo Contest)" />
-        </ul>
+    </ul>
+    <ul id="delayedGallery" class="galleryView">
+    	    <li><img data-original="http://www.spaceforaname.com/galleryview/img/photos/bp52.jpg" src="../css/grey.gif" />
+            <li><img data-original="http://www.spaceforaname.com/galleryview/img/photos/bp53.jpg" src="../css/grey.gif" />
+            <li><img data-original="http://www.spaceforaname.com/galleryview/img/photos/bp54.jpg" src="../css/grey.gif" />
+    </ul>
+    <button id="btn">Toggle Gallery</button>
 	<p>Please view the source of this page if you are having difficulties setting up GalleryView.</p>
 </body>
 </html>

demos/default.html

@@ -25,7 +25,7 @@
 </head>
 
 <body>
-	<ul id="myGallery">
+	<ul id="myGallery" class="galleryView">
 		<li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp1.jpg" alt="Lone Tree Yellowstone" />
 		<li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp2.jpg" alt="Is He Still There?!" />
 		<li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp4.jpg" alt="Noni Nectar For Green Gecko" />

js/jquery.galleryview-3.0-dev.js

@@ -22,8 +22,8 @@ if (typeof Object.create !== 'function') {
 	var gvImage = function (img) {
 
 		this.src = { 
-			panel: img.attr('src'),
-			frame: img.data('frame') || img.attr('src')
+			panel: img.data('original') || img.attr('src'),
+			frame: img.data('frame') || img.data('original') || img.attr('src')
 		};
 		this.scale = {
 			panel: null,