SearchMenu

Demo post — images

This is the second post with tests and demo for images with code snippets and explanations

Let`s go!

Images

Well, here you can see centerd, floated or extra-positioned images. Also you can check fullscreen prview of images by clicking on them. For this purpose I've used Intense Images plugin It's really awesome thing!

    
<figure class="image image_left">
	<img class="js-lazy js-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/static/images/post/2015-01-18-demo-post-images/1.jpg" data-title="Cruise ship" alt="Cruise ship in Trondheimsfjorden, 1923" />
	<figcaption>Cruise ship in Trondheimsfjorden, 1923</figcaption>
</figure>        
	
Left-floated image
Cruise ship in Trondheimsfjorden, 1923
Cruise ship in Trondheimsfjorden, 1923

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat

    
<figure class="image image_right">
	<img class="js-lazy js-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/static/images/post/2015-01-18-demo-post-images/2.jpg" data-title="Canyon bridge" alt="Capilano Canyon, North Vancouver" />
	<figcaption>Capilano Canyon, North Vancouver</figcaption>
</figure>        
	
Right-floated image
Capilano Canyon, North Vancouver
Capilano Canyon, North Vancouver

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.


<figure class="image image_center">
	<img class="js-lazy js-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/static/images/post/2015-01-18-demo-post-images/3.jpg" data-title="Beacon" alt="Lindesnes Fyr" />
	<figcaption>Lindesnes Fyr</figcaption>
</figure>                
	
Centered full-width image
Lindesnes Fyr
Lindesnes Fyr

Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis. Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Donec ac lacus vel lorem aliquet malesuada in sit amet sapien. Aliquam erat volutpat. Nullam gravida faucibus tellus semper molestie.

 
<figure class="image image_left image_left-extra">
	<img class="js-lazy js-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/static/images/post/2015-01-18-demo-post-images/4.jpg" data-title="Orange sky" alt="Transmission lines in May 1972" />
	<figcaption>Transmission lines in May 1972</figcaption>
</figure>               
	
Left floated image with extra margin
Transmission lines in May 1972
Transmission lines in May 1972

Phasellus euismod neque at odio congue bibendum. Nam neque lectus, hendrerit nec ligula nec, feugiat tincidunt dolor. Maecenas id sem orci. Ut non velit est. Nullam et lectus in arcu rhoncus rutrum vitae vitae augue. Donec sodales risus auctor velit vulputate, vel elementum velit viverra. Nulla mattis scelerisque tellus eget malesuada. Donec tempus vulputate felis, id dictum odio euismod sit amet.

Curabitur adipiscing leo eu ipsum rhoncus, quis imperdiet elit pretium. Praesent viverra nunc et justo commodo tincidunt. Mauris leo augue, fringilla vitae tempor in, facilisis in sapien. Integer dui sapien, placerat at orci sit amet, laoreet vestibulum nunc. Vestibulum nec placerat felis. Etiam blandit massa ac ligula aliquet pretium. Suspendisse potenti. Aliquam erat volutpat. Quisque id auctor felis. Proin sollicitudin euismod aliquam.


<figure class="image image_right image_right-extra">
	<img class="js-lazy js-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/static/images/post/2015-01-18-demo-post-images/5.jpg" data-title="Surveying" alt="Surveying at Innveien, Veiholmen, 1923." />
	<figcaption>Surveying at Innveien, Veiholmen, 1923.</figcaption>
</figure>                
	
Right floated image and with extra margin
Surveying at Innveien, Veiholmen, 1923.
Surveying at Innveien, Veiholmen, 1923.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

 
<figure class="image image_center image_center-extra">
	<img class="js-lazy js-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/static/images/post/2015-01-18-demo-post-images/8.jpg" data-title="Old view" alt="Perspective of Jackson, Miss. 1925." />
	<figcaption>Perspective of Jackson, Miss. 1925.</figcaption>
</figure>               
	
Centered image and with extra margins
Perspective of Jackson, Miss. 1925.
Perspective of Jackson, Miss. 1925.

Share this post

If you like this post why don`t you share it with your friends?