EnglishWOWSlider  DeutschBildergalerie Diashow  EspañolGaleria de Imagenes, Slide Imagenes Gratis  FrançaisDiaporama Galerie D'Image  ItalianoImmagini Galleria  汉语网络幻灯片: 效果的幻灯片  Português brasileiroGaleria De Imagens  Русскийслайдер изображений, слайдшоу, CSS3 слайдер  SvenskaBild Galleri  日本語画像のスライダー&ギャラリー  NederlandsAfbeeldingen Caroussel 
  • photo gallery jquery Monument in Leipzig, Germany
  • photo gallery script Middle Ages
  • html photo gallery code Anholt
  • responsive photo gallery Paris
  • lightbox photo gallery Chicago
  • photo gallery slider the River Thames, London
  • jquery photo gallery plugin San Francisco
  • gallery photo jquery France
  • image galleryBerlin
  • jquery photo gallery free Paris
photo jquery gallery code

More Demos

  jQuery Photo Gallery: Quick Creation!

Website slideshows can be made in the easiest way using WOW Slider! Just watch this video tutorial!

  jQuery Photo Gallery on the page!

In this you can find a wide range of transition effects applied to this eye-catching slider!

  jQuery Photo Gallery HTML Code

Code to paste between the tags <head></head>:

<!-- Start WOW Slider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOW Slider.com HEAD section -->

HTML code to paste between the tags <body></body> in the place that you want the jQuery Photo Gallery to appear:


<!-- Start WOW Slider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="images/demo/strict-photo/data1/images/voelkerschlachtdenkmal264413_1280.jpg" alt="The Monument to the Battle of the Nations" title="The Monument to the Battle of the Nations" id="wows1_0"/>Monument in Leipzig, Germany</li>
<li><img src="images/demo/strict-photo/data1/images/castle195105_1920.jpg" alt="Castle" title="Castle" id="wows1_1"/>Middle Ages</li>
<li><img src="images/demo/strict-photo/data1/images/moatedcastle179331_1280.jpg" alt="Castle" title="Castle" id="wows1_2"/>Anholt</li>
<li><img src="images/demo/strict-photo/data1/images/paris114323_1280.jpg" alt="Place de la Concord" title="Place de la Concord" id="wows1_3"/>Paris</li>
<li><img src="images/demo/strict-photo/data1/images/chicago199859_1280.jpg" alt="Sculpture" title="Sculpture" id="wows1_4"/>Chicago</li>
<li><img src="images/demo/strict-photo/data1/images/towerbridge189077_1280.jpg" alt="Tower Bridge" title="Tower Bridge" id="wows1_5"/>the River Thames, London</li>
<li><img src="images/demo/strict-photo/data1/images/sanfrancisco225592_1280.jpg" alt="Golden Gate Bridge" title="Golden Gate Bridge" id="wows1_6"/>San Francisco</li>
<li><img src="images/demo/strict-photo/data1/images/chateauofdesullysurloire196390_1280.jpg" alt="Sully-sur-Loire" title="Sully-sur-Loire" id="wows1_7"/>France</li>
<li><img src="images/demo/strict-photo/data1/images/berlin143832_1280.jpg" alt="Berlin" title="Berlin" id="wows1_8"/>Berlin</li>
<li><img src="images/demo/strict-photo/data1/images/paris253920_1280.jpg" alt="Eiffel Tower" title="Eiffel Tower" id="wows1_9"/>Paris</li>
<div class="ws_bullets"><div>
<a href="#" title="The Monument to the Battle of the Nations"><img src="images/demo/strict-photo/data1/tooltips/voelkerschlachtdenkmal264413_1280.jpg" alt="The Monument to the Battle of the Nations"/>1</a>
<a href="#" title="Castle"><img src="images/demo/strict-photo/data1/tooltips/castle195105_1920.jpg" alt="Castle"/>2</a>
<a href="#" title="Castle"><img src="images/demo/strict-photo/data1/tooltips/moatedcastle179331_1280.jpg" alt="Castle"/>3</a>
<a href="#" title="Place de la Concord"><img src="images/demo/strict-photo/data1/tooltips/paris114323_1280.jpg" alt="Place de la Concord"/>4</a>
<a href="#" title="Sculpture"><img src="images/demo/strict-photo/data1/tooltips/chicago199859_1280.jpg" alt="Sculpture"/>5</a>
<a href="#" title="Tower Bridge"><img src="images/demo/strict-photo/data1/tooltips/towerbridge189077_1280.jpg" alt="Tower Bridge"/>6</a>
<a href="#" title="Golden Gate Bridge"><img src="images/demo/strict-photo/data1/tooltips/sanfrancisco225592_1280.jpg" alt="Golden Gate Bridge"/>7</a>
<a href="#" title="Sully-sur-Loire"><img src="images/demo/strict-photo/data1/tooltips/chateauofdesullysurloire196390_1280.jpg" alt="Sully-sur-Loire"/>8</a>
<a href="#" title="House of the Cultures of the World"><img src="images/demo/strict-photo/data1/tooltips/berlin143832_1280.jpg" alt="Berlin"/>9</a>
<a href="#" title="Eiffel Tower"><img src="images/demo/strict-photo/data1/tooltips/paris253920_1280.jpg" alt="Eiffel Tower"/>10</a>
<div class="ws_shadow"></div>
<script type="text/javascript" src="images/demo/wowslider.js"></script>
<script type="text/javascript" src="images/demo/strict-photo/engine1/script.js"></script>
<!-- End WOW Slider.com BODY section -->


This slider design is colorful and slightly retro in feel. It use blue and white, with gradients and border effects, however it updates the design aesthetic with the choice of a modern san-serif font.

The slider has no border or frame effect. Instead, the default change effect ‘photo’ creates a natural border from a dark collage of all the photographs in the slider. This is a fun choice, and gives the slider the feel of a family album.

The navigation through the slides is controlled by two arrows that appear when you hover over the slider. These arrows are bold white arrow heads against a blue background with a gradient and shadows. A white drop-shadow around the button finishes the effect, and makes the navigation arrow really stand out. The navigation arrow and background are all semi-transparent, so that you can see the photos beneath. However, hovering over the arrow makes it fully opaque.

The navigation arrows are very user friendly, being big and bold and obvious. As such, this slider would be great for a website aimed at a slightly less tech-savvy audience.

jQuery photo gallery ajax

At the bottom centre of the slider are a series of blue squares that mimic the arrow buttons in that they have a gradient and a white drop shadow. When the blue square that represent the current slide is highlighted, a white dot appears in the centre, with a similar ‘flat shadow’ effect.

The same thing happens when you hover over one of the squares, to navigate through the slides. A white dot appears in the centre of the square. In addition, a preview of the slide appears in a blue frame, and you get a caption that tells you the name of the slide.

In the bottom left corner is the caption. The caption has a blue background that pops out from the left hand side of the slider. This is a nice design choice. The text is white, and there is both a larger title and a smaller sub-title. The font used is Roboto Condensed, a very modern, geometric, san-serif font. This font is an interesting choice that updates this slightly retro slider design along with the ‘flat shadow’ design aesthetic.

The caption as a whole is semi-transparent, like the navigation arrows.

jQuery image gallery

There are a number of change effects to choose from, but the default ‘photo’ is a great choice. It creates a natural frame effect, which provides space for the bold UI and prevents it from covering up too much of the main image. It’s fun and slightly retro, which helps reinforce the slider design. And it allows people to get a glimpse of all the images upcoming in the slideshow, which tells users this is a slideshow and helps ‘tease’ the upcoming content.

This slider is perfect for websites aimed at a less tech-savvy audience, e.g. sites with an older demographic. It also has a slightly ‘home-made’ feel to it, which makes it a great choice for family websites to show off holiday snaps or wedding photographs.

© 2016 WOWSlider.com - All Rights Reserved. Terms Privacy