javascript - Get number of image files and switching between them -
i've directory containing few image files [for example 4 files], want number of images existing in directory , show first image , allow users switch between images using controller elements , show number of image showing between it. example: i've 4 images , page shows first image , text " << 1/4 >> " , when user clicks on next button shows next image , text changes " << 2/4 >> " , ... can show me foundation of work? mean can tell me i've (not needed attach codes). use angularjs in page now, if it's needed can use jquery ( if it's not possible using angularjs ).
this html page although think it's not helpful:
<?php require ('functions.php');mob_check(); ?> <!doctype html> <html lang="fa-ir" data-ng-app="projects" data-ng-controller="projects_controller"> <!-- website design mohsen_nirouzad --> <head> <!-- adding meta information --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="mohsen nirouzad - http://aproz.ir"> <!-- defining stylesheets not delete bellow codes if don't have enough knowledge of web design --> <!-- used w3data.min.js javascript templating engine you've change bellow information in script tag --> <meta charset="utf-8"> <title>{{page_title}}</title> <link rel="stylesheet" href="assets/css/app.css"> <link rel="stylesheet" href="assets/css/font-awesome.min.css"> <link rel="stylesheet" href="assets/css/w3rtl.min.css"> <link rel="stylesheet" href="assets/css/imagehover.min.css"> <script src="assets/js/angular.min.js"></script> <style> img { width: 100px; height: 100px; } #second_imglist { position: relative; right: -100px; } #squares { position: absolute; top: 630px; right: 400px; } #imgset { position: relative; top: 30px; } #img_controllers { position: relative; top: 90px; } </style> </head> <body> <?php require 'variables/date.php'; ?> <nav class="w3-sidenav w3-white" style="width:15%" id="mysidenav"> <a href="javascript:void(0)" class="english w3-medium"> <?php echo (date('l d m y')); ?> </a> <a href="javascript:void(0)" class="w3-medium"><span><?php $today=persianday(date("l"));echo $today;?></span> <span><?php echo (date('d m y')); ?></span></a> <a href="engineers.php" id="first_menuitem">مهندسین مشاور سرابن</a> <a href="projects.php" class="w3-no-opacity w3-large">پروژه ها</a> <a href="research.php">پژوهش</a> <a href="contact.php">ارتباط با ما</a> <a href="members.php">اعضا</a> <a href="javascript:void(0)" class="english">english</a> <div class="w3-center" style="margin-top:50px;"> <a href="index.php" id="linkimg"><img src="assets/img/logo.jpg"></a> </div> </nav> <?php /* if ($_get['v']==='desktopview'){ echo '<div data-ng-include="\'variables/sidenav.php\'"></div>'; } elseif ($_get['v']==='mobileview'){ echo '<div data-ng-include="\'variables/sidenav-responsive.html\'"></div>'; } if ($_get['v']==='desktopview'){ echo '<div id="main" style="margin-right: calc(15% + 100px)" class="w3-row-padding">'; } elseif ($_get['v']==='mobileview'){ echo '<div id="main" class="w3-row-padding">'; } if ($_get['v']==='mobileview'){ echo '<span class="w3-opennav w3-text-black w3-xlarge" onclick="w3_open()" id="opennav">☰</span>'; } */?> <div id="main" style="margin-right: calc(15% + 100px)" class="w3-row-padding"> <div class="w3-col s6"> <div data-ng-include="'variables/logo1.html'"></div> <div class="w3-row w3-margin-top" id="imgset"> <div class="w3-col s6" id="first_imglist"> <div> <figure class="imghvr-zoom-out-right" data-ng-click="selectimage(1)"> <img data-ng-src="{{img1}}" alt="example-image"> <figcaption> <h3>سلام دنیا!</h3> <p>این یک متن نمونه است!</p> </figcaption> <a href="javascript:void(0)"></a> </figure> </div> <figure class="imghvr-zoom-out-right" data-ng-click="selectimage()"><img src="{{img1}}" data-ng-click="selectimage()" alt="example-image"> <figcaption> <h3>سلام دنیا!</h3> <p>این یک متن نمونه است!</p> </figcaption> <a href="javascript:void(0)"></a> </figure> <div> <figure class="imghvr-zoom-out-right" data-ng-click="selectimage()"><img src="{{img1}}" alt="example-image"> <figcaption> <h3>سلام دنیا!</h3> <p>این یک متن نمونه است!</p> </figcaption> <a href="javascript:void(0)"></a> </figure> </div> <figure class="imghvr-zoom-out-right" data-ng-click="selectimage()"><img src="{{img1}}" alt="example-image"> <figcaption> <h3>سلام دنیا!</h3> <p>این یک متن نمونه است!</p> </figcaption> <a href="javascript:void(0)"></a> </figure> </div> <div class="w3-col s6" id="second_imglist"> <div> <figure class="imghvr-zoom-out-right" data-ng-click="selectimage()"><img src="{{img1}}" alt="example-image"> <figcaption> <h3>سلام دنیا!</h3> <p>این یک متن نمونه است!</p> </figcaption> <a href="javascript:void(0)"></a> </figure> </div> <figure class="imghvr-zoom-out-right" data-ng-click="selectimage()"><img src="{{img1}}" alt="example-image"> <figcaption> <h3>سلام دنیا!</h3> <p>این یک متن نمونه است!</p> </figcaption> <a href="javascript:void(0)"></a> </figure> <div> <figure class="imghvr-zoom-out-right" data-ng-click="selectimage()"><img src="{{img1}}" alt="example-image"> <figcaption> <h3>سلام دنیا!</h3> <p>این یک متن نمونه است!</p> </figcaption> <a href="javascript:void(0)"></a> </figure> </div> <figure class="imghvr-zoom-out-right" data-ng-click="selectimage()"><img src="{{img1}}" alt="example-image"> <figcaption> <h3>سلام دنیا!</h3> <p>این یک متن نمونه است!</p> </figcaption> <a href="javascript:void(0)"></a> </figure> </div> </div> </div> <div class="w3-col s6 w3-center" id="img_controllers"> <img data-ng-src="{{selectedimage}}" data-ng-if="selectimage" style="width:100% !important;height:100% !important;margin-top:100px" class="w3-hover-opacity w3-round-small"> <div> <a href="javascript:void(0)" data-ng-click="increasenumber()"><i class="fa fa-arrow-right"></i></a> {{activenumber}}/{{imagesnumber}} <a href="javascript:void(0)" data-ng-click="decreasenumber()"><i class="fa fa-arrow-left"></i></a> <a href="javascript:void(0)" data-ng-click="remove()" class="pull-left"><i class="fa fa-close"></i></a> </div> </div> </div> <div data-ng-include="'variables/footer.html'"></div> <div class="w3-center" id="squares"> <a href="javascript:void(0)" hreflang="fa-ir" data-ng-click=""><i class="fa fa-square"></i></a> <a href="javascript:void(0)" hreflang="fa-ir" data-ng-click=""><i class="fa fa-square-o"></i></a> <a href="javascript:void(0)" hreflang="fa-ir" data-ng-click=""><i class="fa fa-square-o"></i></a> <a href="javascript:void(0)" hreflang="fa-ir" data-ng-click=""><i class="fa fa-square-o"></i></a> <a href="javascript:void(0)" hreflang="fa-ir" data-ng-click=""><i class="fa fa-square-o"></i></a> <a href="javascript:void(0)" hreflang="fa-ir" data-ng-click=""><i class="fa fa-square-o"></i></a> <a href="javascript:void(0)" hreflang="fa-ir" data-ng-click=""><i class="fa fa-square-o"></i></a> </div> <script src="assets/js/projects.js"></script> <script> <?php if ($_get['v']==='mobileview'){ echo 'function w3_open() { document.getelementbyid("main").style.marginright = "25%"; document.getelementbyid("mysidenav").style.width = "25%"; document.getelementbyid("mysidenav").style.display = "block"; document.getelementbyid("opennav").style.display = \'none\'; } function w3_close() { document.getelementbyid("main").style.marginright = "0%"; document.getelementbyid("mysidenav").style.display = "none"; document.getelementbyid("opennav").style.display = "inline-block"; }'; } ?> </script> </body> </html> projects.js:
// start angularjs application var application = angular.module('projects', []); // setting conroller application.controller('projects_controller', function ($scope) { $scope.page_title = 'پروژه ها', $scope.img1 = 'assets/img/example-image.jpg', $scope.selectimage = function () { $scope.selectedimage = $scope.img1; }; //$scope.selectedimage = $scope.img1; $scope.imagesnumber = 12, $scope.firstnumber = 1, $scope.activenumber = $scope.firstnumber, $scope.increasenumber = function () { if ($scope.activenumber === $scope.imagesnumber) { $scope.activenumber = $scope.firstnumber; } else { $scope.activenumber++; } } $scope.decreasenumber = function () { if ($scope.activenumber === $scope.firstsnumber) { $scope.activenumber = $scope.imagesnumber; } else { $scope.activenumber--; } }, $scope.remove = function () { document.getelementbyid('img_controllers').style.display = 'none'; }; });
i going write image pagination static logic,i think can you.
html
<img src="first image url" id="1_image" class="image-element"> <img src="second image url" id="2_image" class="image-element"> <img src="third image url" id="3_image" class="image-element"> <a href="javascript:void(0)" id="1" class="pagination-link"> <br> <a href="javascript:void(0)" id="2" class="pagination-link"> <br> <a href="javascript:void(0)" id="3" class="pagination-link"> jquery
$( document ).ready(function() { //hide images in load event $('.image-element').hide(); //show default 1 image in load event. $('#1').show(); $(.pagination-link).on('click','.pagination-link',function{ //hide images using class. $('.image-element').hide('slow'); var link_id = $(this).id(); //show particular 1 image using id $('#'+link_id+"_image").show('slow'); }) }); 
Comments
Post a Comment