为什么图库不能在网页上工作?

时间:2018-10-31 11:46:21

标签: javascript jquery html css lightbox

我想像画廊一样显示我的照片,但不像画廊一样显示 就像在浏览器中打开普通文件一样 我是根据某个培训课程编写代码的,并且一直在观看我将自己的文件与该课程的文件进行比较的过程,尽管它们是相同的,但是该课程的页面工作正常,而我的课程却不起作用

这是我的代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>template</title>
    <link rel="stylesheet" href="./style.css" type="text/css">
    <script type="text/javascript" src="./libs/prefixfree.min.js"></script><!--pishvandi-->
    <link rel="stylesheet" type="text/css" href="./libs/hint.css"><!--tool tip-->
    <link rel="stylesheet" href="./libs/buttons.css" type="text/css"><!--klid-->
    <link rel="stylesheet" type="text/css" href="./libs/font-awesome-4.3.0/css/font-awesome.min.css"><!--aycon-->
    <style>
        .fa{
            margin-left: 5px;
            vertical-align: -1px;
        }
    </style>

    <script type="text/javascript" src="jquery.min.js"></script>
    <link rel="stylesheet" href="./libs/prettyPhoto/css/prettyPhoto.css" type="text/css">
    <script type="text/javascript" src="libs/prettyPhoto/js/jquery.prettyPhoto.js"></scrip>
        <script type="text/javascript" charset="utf-8">
        $(document).read(function () {
           $("a[rel^='pp']").prettyPhoto({
              autoplay_slideshow:true,
              social_tools:false
           });
        });
        </script>

        <script type="text/javascript" src="libs/ResponsiveSlides/responsiveslides.js"></script>
    <link rel="stylesheet" href="./libs/ResponsiveSlides/responsiveslides.css" type="text/css">
    <script>
        $(function () {
            $(".rslides").responsiveSlides({
                timeout:5000,
                pager:true,
                nav:false,
            });
        });
    </script>
    <link rel="shortcut icon" href="IMG_20180522_235723.jpg" type="image/x-icon">
</head>
<body>
<!--header-->
<div id="main">
    <div class="wrapper row1">
        <header id="header" class="clear">
            <hgroup>
                <h1 class="hint--right hint--bounce hint--success" data-hint="a awesome website"><a href="#">7learn.com</a></h1>
                <h2>online web design and programing courses</h2>
            </hgroup>
            <nav>
                <ul>
                    <li><a href="#" class="current"><span class="fa fa-home"></span>خانه</a></li>
                    <li><a href="#"><span class="fa fa-diamond"></span>خدمات </a></li>
                    <li><a href="#"><span class="fa fa-globe"></span>درباره ی ما</a></li>
                    <li><a href="#"><span class="fa fa-envelope"></span>تماس با ما</a></li>
                    <li><a href="#"><span class="fa fa-list"></span>دسته بندی</a></li>
                </ul>
            </nav>
        </header>
    </div>
    <!--content-->
    <div class="clear"></div>
    <div class="wrapper row2">
        <div class="clear" id="container">
            <!--slider-->
          <section id="slider">
              <ul class="rslides">
                  <li><a href="http://facebook.com/7learn"><img src="assets/like.jpg" alt=""> </a> </li>
                  <li><a href="http://7learn.com"><img src="assets/7l.jpg" alt=""> </a> </li>
                  <li><a href="http://7Learn.com"><img src="assets/like.jpg" alt=""></a></li>
                  <li><a href="http://7Learn.com"><img src="assets/7l.jpg" alt=""></a></li>
                  <li><a href="http://7Learn.com"><img src="assets/7l.jpg" alt=""></a></li>
              </ul>
            </section>
            <!--sidebar-->
            <aside id="left-column">
                <h2 class="title">categories</h2>
                <nav>
                    <ul>
                        <li><a href="http://www.7learn.com">web design classes</a></li>
                        <li><a href="http://www.7learn.com">html & css</a></li>
                        <li><a href="https://www.7learn.com">secure link one</a></li>
                        <li><a href="https://www.7learn.com">secure link two</a></li>
                        <li><a href="http://www.7learn.com">php course</a></li>
                    </ul>
                </nav>

                <h2 class="title">gallery1</h2>
            <div class="gallery">
             <a href="assets/1.jpg" rel="pp[g1]" title="this is description 1"> <img src="assets/t_1.jpg" width="60" height="60" alt="this is title 1"/></a>
             <a href="assets/2.jpg" rel="pp[g1]" title="this is description 2"> <img src="assets/t_2.jpg" width="60" height="60" alt="this is title 2"/></a>
            </div>
                <h2 class="title">gallery2</h2>
            <div class="gallery">
              <a href="assets/3.jpg" rel="pp[g2]" title="this is description 3"> <img src="assets/t_3.jpg" width="60" height="60" alt="this is title 3"/></a>
              <a href="assets/4.jpg" rel="pp[g2]" title="this is description 4"> <img src="assets/t_4.jpg" width="60" height="60" alt="this is title 4"/></a>
              <a href="assets/5.jpg" rel="pp[g2]" title="this is description 5"> <img src="assets/t_5.jpg" width="60" height="60" alt="this is title 5"/></a>
            </div>
                <h2 class="title">get in contact</h2>
                <section class="last">
                    <address>
                        logman<br>
                        shiraz<br>
                        tel:xxxx xxx xxxx<br>
                        email:<a href="#">contact@domain.com</a>
                    </address>
                </section>
            </aside>
            <!--main content-->
            <div id="content">
                <article>
                    <time>12 may 2014</time>
                    <h2>post title number one</h2>
                    <p>Easy Account Manager is programmed by BlackDove.
                        <a href="http://www.7learn.com/" class="button button-highlight button-rounded button-3d button-longshadow-right">7learn.com</a></p>
                    <p> Easy Account Manager is a solution for importing, exporting and backing up your entire Call of
                        Duty:
                        Modern Warfare 2 multiplayer playing statistics, including unlocks, custom weapon
                        configurations,
                        emblems, challenges, and more! Easy Account Manager is a game enhancement utility</p>
                    <footer class="more"><a href="#" target="_blank">read more...</a></footer>

                </article>

                <article>
                    <time>07 march 2014</time>
                    <h2>post title number two</h2>
                    <p>Easy Account Manager is programmed by BlackDove.
                    </p><a href="http://www.7learn.com"></a>
                    <table>
                        <tr>
                             <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                    </table>
                    <p> Easy Account Manager is a solution for importing, exporting and backing up your entire Call of
                        Duty:
                        Modern Warfare 2 multiplayer playing statistics, including unlocks, custom weapon
                        configurations,
                        emblems, challenges, and more! Easy Account Manager is a game enhancement utility</p>
                    <footer class="more"><a href="#" target="_blank">read more...</a></footer>

                </article>

                <article>
                    <time>23 nowamber 2013</time>
                    <h2>post title number three</h2>
                    <p>Easy Account Manager is programmed by BlackDove.
                    </p><a href="http://www.7learn.com"></a>
                    <p> Easy Account Manager is a solution for importing, exporting and backing up your entire Call of
                        Duty:
                        Modern Warfare 2 multiplayer playing statistics, including unlocks, custom weapon
                        configurations,
                        emblems, challenges, and more! Easy Account Manager is a game enhancement utility</p>
                    <footer class="more"><a href="#" target="_blank">read more...</a></footer>

                </article>
            </div>
    </div>
    </div>
    <div class="clear"></div>
    <!--footer-->
    <div class="wrapper row3">
        <footer id="foot" class="clear"></footer>
        <p class="f1_left">copyright &copy; 2015 - all rights reserved -<a href="#">7learn.com</a></p>
        <p class="f1_right">template by<a href="http://wwww.7learn.com/" title="web design learning">7lear.com</a></p>
        <a href="#top"><img class="goUp" src="up.png"></a>
    </div>
    <div>
</body>
</html>

这是课程代码

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>7Learn Html5 Template</title>
    <link rel="stylesheet" href="assets/styles.css" type="text/css">
    <script type="text/javascript" src="libs/prefixfree.min.js"></script>
    <link rel="stylesheet" href="libs/hint.css" type="text/css">
    <link rel="stylesheet" href="libs/buttons.css" type="text/css">
    <link rel="stylesheet" href="libs/font-awesome-4.3.0/css/font-awesome.min.css" type="text/css">
    <style>
        .fa{
            margin-left: 5px;
            vertical-align: -1px;
        }
    </style>

    <script type="text/javascript" src="libs/jquery.min.js"></script>
    <link rel="stylesheet" href="libs/prettyPhoto/css/prettyPhoto.css" type="text/css">
    <script type="text/javascript" src="libs/prettyPhoto/js/jquery.prettyPhoto.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(document).ready(function(){
        $("a[rel^='pp']").prettyPhoto({
            autoplay_slideshow: true,
            social_tools:false
        });
      });
    </script>

    <script type="text/javascript" src="libs/ResponsiveSlides/responsiveslides.js"></script>
    <link rel="stylesheet" href="libs/ResponsiveSlides/responsiveslides.css" type="text/css">
    <script>
      $(function() {
        $(".rslides").responsiveSlides({
            timeout: 5000,
            pager: true,
            nav: false,
        });
      });
    </script>
    <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
</head>
<body>
<div id="main">
    <div class="wrapper row1">
        <header id="header" class="clear">
            <nav>
                <ul>
                    <li><a href="#" class="current"><span class="fa fa-home"></span>خانه</a></li>
                    <li><a href="#"><span class="fa fa-diamond"></span>خدمات</a></li>
                    <li><a href="#"><span class="fa fa-globe"></span>درباره ما</a></li>
                    <li><a href="#"><span class="fa fa-envelope"></span>تماس با ما</a></li>
                    <li><a href="#"><span class="fa fa-list"></span>دسته بندی ها</a></li>
                </ul>
            </nav>
        </header>
    </div>
    <!--content-->
    <div class="clear"></div>
    <div class="wrapper row2">
        <div id="container" class="clear">
            <!-- Slider -->
            <section id="slider">
                <ul class="rslides">
                  <li><a href="http://facebook.com/7Learn"><img src="assets/like.jpg" alt=""></a></li>
                  <li><a href="http://7Learn.com"><img src="assets/7l.jpg" alt=""></a></li>
                  <li><a href="http://7Learn.com"><img src="assets/7l.jpg" alt=""></a></li>
                  <li><a href="http://7Learn.com"><img src="assets/7l.jpg" alt=""></a></li>
                  <li><a href="http://7Learn.com"><img src="assets/7l.jpg" alt=""></a></li>
                </ul>
            </section>
            <!-- Left Sidebar -->
            <aside id="left_column">
                <h2 class="title">Categories</h2>
                <nav>
                    <ul>
                        <li><a href="http://www.7Learn.com">WebDesign Classes</a></li>
                        <li><a href="http://www.7Learn.com">Html & CSS</a></li>
                        <li><a href="https://www.7Learn.com">Secure Link One</a></li>
                        <li><a href="https://www.7Learn.com">Secure Link Two</a></li>
                        <li><a href="http://www.7Learn.com">PHP Course</a></li>
                    </ul>
                </nav>

                <h2 class="title">Gallery 1</h2>
                <div class="gallery">
                    <a href="assets/1.jpg" rel="pp[g1]" title="This is the description 1"><img src="assets/t_1.jpg" width="60" height="60" alt="This is the title 1" /></a>
                    <a href="assets/2.jpg" rel="pp[g1]" title="This is the description 2"><img src="assets/t_2.jpg" width="60" height="60" alt="This is the title 2" /></a>
                </div>
                <h2 class="title">Gallery 2</h2>
                <div class="gallery">
                    <a href="assets/3.jpg" rel="pp[g2]" title="This is the description 3"><img src="assets/t_3.jpg" width="60" height="60" alt="This is the title 3" /></a>
                    <a href="assets/4.jpg" rel="pp[g2]" title="This is the description 4"><img src="assets/t_4.jpg" width="60" height="60" alt="This is the title 4" /></a>
                    <a href="assets/5.jpg" rel="pp[g2]" title="This is the description 5"><img src="assets/t_5.jpg" width="60" height="60" alt="This is the title 5" /></a>
                </div>
                <h2 class="title">Get In Contact</h2>
                <section class="last">
                    <address>
                        Loghman Avand<br>
                        Shiraz<br>
                        <br>
                        Tel: xxxx xxxx xxxxxx<br>
                        Email: <a href="#">contact@domain.com</a>
                    </address>
                </section>
            </aside>
            <!-- main content -->
            <div id="content">
                <article>
                    <time>12 may 2014</time>
                    <h2>Post Title Number One</h2>

                    <p>This is a W3C compliant free website template from
                        <a href="http://www.7Learn.com/" class="button button-highlight button-large button-rounded button-3d button-longshadow-right" title="WebDesign Classes">7Learn.com</a>.</p>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the
                        industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
                        type
                        and scrambled it to make a type specimen book. It has survived not only five centuries, but also
                        the
                        leap into electronic typesetting, remaining essentially unchanged. It was popularised in the
                        1960s
                        with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
                        desktop
                    <table>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                    </tr>
                    </table>
                        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                    <footer class="more"><a href="#" target="_blank">Read more ...</a></footer>
                </article>
                <article>
                    <time>07 march 2014</time>
                    <h2>Post Title Two</h2>

                    <p>This is a W3C compliant free website template from <a href="http://www.7Learn.com/"
                                                                             title="WebDesign Classes">7Learn</a>.
                    <table>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>

                    </table>
                    </p>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the
                        industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
                        type
                        and scrambled it to make a type specimen book. It has survived not only five centuries, but also
                        the
                        leap into electronic typesetting, remaining essentially unchanged. It was popularised in the
                        1960s
                        with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
                        desktop
                        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                    <footer class="more"><a href="#" target="_blank">Read more ...</a></footer>
                </article>
                <article>
                    <time>23 november 2013</time>

                    <h2>Post Title Number Three</h2>

                    <p>This is a W3C compliant free website template from <a href="http://www.7Learn.com/"
                                                                             title="WebDesign Classes">7Learn</a>.</p>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the
                        industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
                        type
                        and scrambled it to make a type specimen book. It has survived not only five centuries, but also
                        the
                        leap into electronic typesetting, remaining essentially unchanged. It was popularised in the
                        1960s
                        with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
                        desktop
                        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                    <footer class="more"><a href="#" target="_blank">Read more ...</a></footer>
                </article>
            </div>

        </div>
    </div>
    <div class="clear"></div>
    <div class="wrapper row3">
        <footer id="foot" class="clear">
            <p class="fl_left">Copyright &copy; 2015 - All Rights Reserved - <a href="#">7Learn.com</a></p>
            <p class="fl_right">Template by <a href="http://www.7Learn.com/" title="Web Design Learning">7Learn.com</a>
            </p>
            <a href="#top"><img class="goUp" src="assets/up.png"></a>
        </footer>
    </div>
</div>
</body>
</html>

我也检查我的其他文件,嘿,都一样

1 个答案:

答案 0 :(得分:0)

您放置为已读而不是已准备好

  $(document).read(function () {
       $("a[rel^='pp']").prettyPhoto({
          autoplay_slideshow:true,
          social_tools:false
       });
    });
    </scr

代替

     $(document).ready(function(){
    $("a[rel^='pp']").prettyPhoto({
        autoplay_slideshow: true,
        social_tools:false
    });
  });