![]() ![]() $imgWrapper = $rgGallery.find('div.rg-image') $navNext = $rgGallery.find('a.rg-image-nav-next'), Var $navPrev = $rgGallery.find('a.rg-image-nav-prev'), $items.add('').imagesLoaded( function() ).appendTo( $rgGallery ) (not necessary) preloading the images here. Then we’ll call some of our functions that are following below: Here we’ll define some variables for the current image, the mode and a variable for controlling if an image is being loaded. $esCarousel = $rgGallery.find('div.es-carousel-wrapper'), For making the thumbnail carousel responsive, we’ll use Elastislide, our previous plugin. The main idea of the gallery is to make it flexible, so partly we have achieved that by our style: the large image will adjust to the container. The caption will have the following style:įont-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif īackground:#464646 url(./images/views.png) no-repeat top left Īnd finally, we’ll make the loading element appear in the center of the image preview:īackground:#000 url(./images/ajax-loader.gif) no-repeat center center Īnd that’s all the style! Let’s take a look at the JavaScript. ![]() On hover we want to make them more opaque: Since we already defined the left value for the elements in general we need to set it to auto again if we want to use “right” instead. webkit-border-radius: 0px 10px 10px 0px This is actually the style of the left arrow and now we’ll overwrite some properties for the right arrow: webkit-border-radius: 10px 0px 0px 10px The style of the arrow anchors will be the following:īackground:#000 url(./images/nav.png) no-repeat -20% 50% Now, why setting the max-height to 100% as well? We actually don’t need this but if you would like to restrict the size of the preview area you could set a fixed height for the “rg-image” class and the image would fit in it while still resizing when the width of the view-port changes. This is very nicely explained in Fluid Images by Ethan Marcotte on A List Apart. This will make sure that there is no gap under the image which is an inline-element by default:īy setting the max-width of our large image to 100%, we make sure that it will always stay in the surrounding fluid container. But since we’ll not set the image to “display:block”, we need to add a line-height of 0. By adding text-align “center” we make all inline elements align in the center. The container that we’ll use to add the big image will be relative and have a line-height of 0. The borders will be rounded and we’ll give it a min-height of 20 pixels so that the loading element fits into the container initially when the first image get’s loaded:īackground:transparent url(./images/black.png) repeat top left The “rg-image-wrapper” that you saw in our jQuery template will be of relative position and we’ll add a repeated semi-transparent black background image. The “rg-image” container will be used to add the large image.īesides adjusting a few values like the padding and the margins of the Elastislide thumbnail carousel, we need to style the resting elements of the gallery. We are adding a condition that will make sure that the navigation is only shown if there is more than one image. The “data-large” attribute will have the path to the large image and the “data-description” attribute will contain the caption of the image that we will display under the current large image.įor the structure of the large preview area we will create a jQuery template that we’ll add to the head of our document: The thumbnails will have two data attributes that we’ll use later in our JavaScript. In another div with the class “rg-thumbs” we’ll add the structure of the Elastislide carousel: For the HTML structure we’ll have a main wrapper with the class “rg-gallery”. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |