イメージファイルの数を取得してそれらを切り替える

イメージファイル[たとえば4ファイル]を含むディレクトリがあり、そのディレクトリに存在するイメージの数を取得してから、最初のイメージを表示してユーザーを許可したいいくつかのコントローラー要素を使用して画像を切り替え、その間に表示されている画像の番号を表示します。私は4つの画像を表示し、ページには最初の画像とこのテキスト「< < 1/4 >>」が表示され、次のボタンをクリックすると次の画像が表示され、「< < 2/4 >> "と... 私は仕事の基礎を教えてくれますか？私は何をしなければならないかを教えてくれるだけです（コードを付ける必要はありません）。私は今、私のページにAngularJSを使用しています。しかし、必要ならば、私はJQueryを使用することもできます（AngularJSを使用することはできません）。イメージファイルの数を取得してそれらを切り替える

これは、私はそれが非常に有用ではないと思うが、私のhtmlページです：

<?php require ('functions.php');mob_check(); ?> 

    <!DOCTYPE html> 
    <html lang="fa-IR" data-ng-app="projects" data-ng-controller="projects_controller"> 
    <!-- Website design by 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 DO NOT delete the bellow codes if you don't have enough knowledge of web design --> 
     <!-- I used w3data.min.js for javascript templating engine so you've to change the 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">&#9776;</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'; 
     }; 
});

出典

2016-09-07 user6767148

あなたがクライアントにあなたのイメージや画像自体に関する情報を提供してウェブサーバを必要とし – Jayababu

質問にHTMLを追加してください。 – Maxx

@Jayababu私は自分の投稿にコードを追加しました。 Maxx私はあなたが何について話しているのか理解できません。私はいくつかのJS/AngularJSコードでそれをやりたいのですが、あなたは私のページにいくつかのサーバー側スクリプトが必要なのですか？ – user6767148

私は画像ページネーション静的ロジックを記述しようと思って、私はそれを助けることができると思います君は。

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 all images in load event 
     $('.image-element').hide(); 

     //show default one image in load event. 
     $('#1').show(); 

     $(.pagination-link).on('click','.pagination-link',function{ 
      //Hide all images using class. 
      $('.image-element').hide('slow'); 
      var link_id = $(this).id(); 
      //show particular one image using id 
      $('#'+link_id+"_image").show('slow'); 
     }) 
    });

出典

2016-09-07 12:51:07

イメージファイルの数を取得してそれらを切り替える

答えて

関連する問題