Based on jquery full screen album plugin Zoomvisualizer. This is a jquery UI based on the implementation of the album Plug-in, support to hide display album thumbnails, support left and right arrows to switch pictures, support zoom in and zoom out of the picture. As follows:
Online preview Source Download
The implemented code.
HTML code:
<DivID= "Zoom-visualizer"> <Divclass= "LIGHTBOX-OFERTAS-BG"></Div> <Divclass= "Lightbox"> <Divclass= "header"> <Divclass= "Inside"> <DivID= "Wrapper-fechar"class= "Tooltip-content"> <Divclass= "tooltip"> <P>Close</P> <span></span> </Div> <ahref=""class= "Fechar tooltip-caller"></a> <Divclass= "Clear"></Div> </Div> <DivID= "Zoom"> <Div> <Divclass= "Tooltip-content"> <Divclass= "tooltip"> <P>Zoom out</P> <span></span> </Div> <ahref="#"class= "Zoom-out Tooltip-caller"></a> </Div> <DivID= "Wrapper-barra-zoom"class= "Tooltip-content"> <Divclass= "tooltip"> <P>Zoom</P> <span></span> </Div> <Divclass= "Tooltip-caller Wrapper-barra"> <spanID= "Barra"> <StrongID= "Scroll"class= "Ui-draggable"style= "position:relative; left:0px;"> </Strong> </span> </Div> </Div> <Divclass= "Tooltip-content"> <Divclass= "tooltip"> <P>Zoom in</P> <span></span> </Div> <ahref="#"class= "Zoom-in Tooltip-caller"></a> </Div> <Divclass= "Clear"></Div> </Div> </Div> <Divclass= "Clear"></Div> </Div> </Div> <Divclass= "Content"> <ahref=""ID= "Next"></a> <Divclass= "wrapper"style= "width:1415px; height:362px;"> <imgsrc= "Img/camiseta_hombre_jackknife_negra.jpg"class= "Dragme"> </Div> <ahref=""ID= "Before"></a> </Div> <Divclass= "Footer"> <ahref="#"ID= "Aba-lista"><span>Hide Thumbnails</span></a> <DivID= "Listagem-imagens"> <Div> <aclass= "Item-zoom-image ativo"href= "Img/camiseta_hombre_jackknife_negra.jpg"alt= "0"><imgsrc= "Img/camiseta_hombre_jackknife_negra-thumb.jpg"> </a> <aclass= "Item-zoom-image"href= "Img/design.png"alt= "1"><imgsrc= "Img/design-thumb.png"> </a> <aclass= "Item-zoom-image"href= "Img/camiseta_hombre_lumberjack_blanca.jpg"alt= "2"> <imgsrc= "Img/camiseta_hombre_lumberjack_blanca-thumb.jpg"> </a> <aclass= "Item-zoom-image"href= "Img/camiseta_hombre_mr-speed_blanca1.jpg"alt= "2"> <imgsrc= "Img/camiseta_hombre_mr-speed_blanca1-thumb.jpg"> </a> <Divclass= "Clear"></Div> </Div> </Div> </Div> </Div></Div>
via:http://www.w2bc.com/article/42016
jquery full-screen album plugin Zoomvisualizer