![paginate flickr gallery js paginate flickr gallery js](https://farm5.staticflickr.com/4465/37193071216_4f4b825ef0_z.jpg)
The label is tied to the input by using the for attribute. The form is made of a label, an input where the user can write the text to search, and a button to submit the request. The title of the page is defined by an h1 element and the form by a form element. We’ll wrap both the elements described in the previous section – the title and the form – with a header element. The HTML needed for the header is very simple.
![paginate flickr gallery js paginate flickr gallery js](https://live.staticflickr.com/4075/4889204687_04b7950a01_z.jpg)
The first step in creating our service is to write the markup of the page, and we’ll start with the header. Having established the goals, components and conventions of our project, let’s start the fun! Both conventions are equivalent and you can choose the one you like the most.
![paginate flickr gallery js paginate flickr gallery js](http://3.bp.blogspot.com/_annTPGBcsB4/SsMRTMEFJXI/AAAAAAAACro/yrhb-kKyHKo/w1200-h630-p-k-no-nu/yacht-bunk-test-2.jpg)
In case you don’t like the js- prefix, I’ve read that some developers use the do- prefix to highlight the fact that the element is used to perform an action.
PAGINATE FLICKR GALLERY JS CODE
Then I’ll retrieve the elements like so: var gallery = document.getElementsB圜lassName('js-gallery') ĭoing it this way ensures that, even if later in the project the gallery class name is renamed or removed, the JavaScript code will still work. I’ll add another class named js-gallery: Instead of retrieving the element using the gallery class name as shown below: var gallery = document.getElementsB圜lassName('gallery') The gallery class name is used to style the element, but the latter needs to be retrieved by a JavaScript function to perform some actions. Let’s say we have defined the gallery element as such: To reinforce the concept, let’s briefly discuss an example. This is a common technique used by many developers to separate class names and JavaScript hooks. So, if a piece of JavaScript needs to retrieve one or more elements, instead of using the existing class names, I’ll add a specific class name to the elements, prefixed with js. The class names used for styling purposes won’t be used as JavaScript hooks. Some might think that it’s overkill, but I think this is a nice opportunity to learn a new methodology you might not be familiar with. The result of our efforts is shown in the image below:Īlthough the project on its own isn’t complex, I’ll use the BEM methodology to name the classes used in addition to some helpers. The whole service will be developed paying attention to accessibility, so along the way we’ll employ the relevant role attribute where it makes sense and also ensure that it’s possible to navigate the website and trigger the various actions through the use of the TAB and ENTER keys.
PAGINATE FLICKR GALLERY JS UPDATE
However, after reading this series, you can update to code to trigger this action if you wish.) (In this project, clicking on the right arrow won’t cause the next page of thumbnails to load. We don’t want the list to become too long, so we’ll paginate the photos matched and show up to 15 photos on each page, displayed in three rows.
![paginate flickr gallery js paginate flickr gallery js](https://live.staticflickr.com/7859/32625068427_c49d415e07_b.jpg)
The gallery will also feature left and right buttons to show the previous and next images respectively.įinally, we’ll have a list of thumbnails of the photos below the gallery. The gallery will sit beneath the header and will show the image chosen in its natural size, up to a fixed width and height (we don’t want the image to overflow our layout, do we?). The header will contain the page’s title and a search form that the user can employ to find the photos matching the given text. First of all, our project will be made of a single HTML page comprising three main components: a header, a gallery, and a list of thumbnails. Before we write any code, it’s important to understand how the service will be developed.