im trying add fancybox tool page, working not example:
my code:
<head> <title>image gallery</title> <link rel="stylesheet" href="file:///d:/css%20projects/image%20gallery/css/style.css"> <link rel="styleshhet" href="file:///d:/css%20projects/image%20gallery/css/jquery.fancybox.css"> <link rel="styleshhet" href="file:///d:/css%20projects/image%20gallery/css/jquery.fancybox-buttons.css"> <link rel="styleshhet" href="file:///d:/css%20projects/image%20gallery/css/jquery.fancybox-thumbs.css"> <script src="file:///d:/css%20projects/image%20gallery/js/jquery.js"></script> <script src="file:///d:/css%20projects/image%20gallery/js/jquery.fancybox.pack.js"></script> <script src="file:///d:/css%20projects/image%20gallery/js/jquery.fancybox-buttons.js"></script> <script src = "file:///d:/css%20projects/image%20gallery/js/jquery.fancybox-media.js"></script> <script src = "file:///d:/css%20projects/image%20gallery/js/jquery.fancybox-thumbs.javascript"></script> <script type ="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); }); </script> </head> <body> <header> <div class="container"> <img src="file:///d:/css%20projects/image%20gallery/images/logo.jpg" class="logo"> </div> </header> <div class="container"> <section> <div class="gallery"> <a class ="fancybox" data-fancybox-group="gallery" href="file:///d:/css%20projects/image%20gallery/images/img1.jpg"> <img src="file:///d:/css%20projects/image%20gallery/images/img1.jpg"></a> <a class ="fancybox" data-fancybox-group="gallery" href="file:///d:/css%20projects/image%20gallery/images/img2.jpg"> <img src="file:///d:/css%20projects/image%20gallery/images/img2.jpg"></a> <a class ="fancybox" data-fancybox-group="gallery" href="file:///d:/css%20projects/image%20gallery/images/img3.jpg"> <img src="file:///d:/css%20projects/image%20gallery/images/img3.jpg"></a> <a class ="fancybox" data-fancybox-group="gallery" href="file:///d:/css%20projects/image%20gallery/images/img4.jpg"> <img src="file:///d:/css%20projects/image%20gallery/images/img4.jpg"></a> <a class ="fancybox" data-fancybox-group="gallery" href="file:///d:/css%20projects/image%20gallery/images/img5.jpg"> <img src="file:///d:/css%20projects/image%20gallery/images/img5.jpg"></a> <a class ="fancybox" data-fancybox-group="gallery" href="file:///d:/css%20projects/image%20gallery/images/img6.jpg"> <img src="file:///d:/css%20projects/image%20gallery/images/img6.jpg"></a> </div> </section> <aside> <nav> <a data-rel="all"href="javascript;">view all</a> <a data-rel="category1" href="javascript;">category 1</a> <a data-rel="category2" href="javascript;">category 2</a> </nav> </aside> </div> <footer> <div class="container"> <p>copyright © 2014</p> </div> </footer> </body> </html> i download css,java files correct , linked them in html file.
however, result picture popup normal jumping bit stuck. forget line of something..
thanks.
$(".fancybox") returns elements class fancybox. need iterate on each element using jquery's $.each()
Comments
Post a Comment