В Джекиле не загружается изображение - PullRequest
Новая
       22

В Джекиле не загружается изображение

0 голосов
/ 04 октября 2018

Я создал карусель на основе слайдера, используя jQuery. Здесь - это скрипка, которая описывает это.Эта страница будет постом на моем сайте и имеет код: 

---
layout: post
title: "Jammu And Kashmir GIFs"
---

<html>
<head>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">






      <style>
   #slider
   {
     width: 80%;
     margin: 0 auto;
   }
  #custom-handle {
    width: 3.5em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
    font-size: 120% ;
  }
  </style>

  <script>
    $( function() {
            $( "#slider" ).slider({
                max: 88
            });

        var handle = $( "#custom-handle" );

        $( "#slider" ).slider({

        create: function() {

        var slide_number = Math.floor(parseInt($(this).slider("value"))/5.55555) ;
        $("#para").text(slide_number) ;
        handle.text( $( this ).slider( (Number("value")+1900)+'' ) );
        $('.carousel').carousel(slide_number) ;
        },
      slide: function( event, ui ) {
        var curr_val = parseInt(ui.value) ;
        var slide_number = Math.floor(parseInt(ui.value)/5.55555) ;
        $("#para").text(slide_number) ;
        handle.text( (Number(ui.value)+1911)+'' );

        if(curr_val<5)
            $('.carousel').carousel(0) ;
        else if(curr_val<10)
            $('.carousel').carousel(1) ;
        else if(curr_val<15)
            $('.carousel').carousel(2) ;
        else if(curr_val<20)
            $('.carousel').carousel(3) ;
        else if(curr_val<25)
            $('.carousel').carousel(4) ;
        else if(curr_val<30)
            $('.carousel').carousel(5) ;
        else if(curr_val<35)
            $('.carousel').carousel(6) ;
        else if(curr_val<40)
            $('.carousel').carousel(7) ;
        else if(curr_val<45)
            $('.carousel').carousel(8) ;
        else if(curr_val<50)
            $('.carousel').carousel(9) ;
        else if(curr_val<55)
            $('.carousel').carousel(10) ;
        else if(curr_val<60)
            $('.carousel').carousel(11) ;
        else if(curr_val<65)
            $('.carousel').carousel(12) ;
        else if(curr_val<70)
            $('.carousel').carousel(13) ;
        else if(curr_val<75)
            $('.carousel').carousel(14) ;
        else if(curr_val<80)
            $('.carousel').carousel(15) ;
        else if(curr_val<85)
            $('.carousel').carousel(16) ;
        else if(curr_val<90)
            $('.carousel').carousel(17) ;

        }
        });
    } );
    </script>    
</head>
<div id="carouselExampleIndicators" class="carousel slide" data-interval="false" >
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>

  </ol>
  <div class="carousel-inner" style="width:50%; height:50%; margin: 0 auto;">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://i.imgur.com/pRN7Dzr.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/ZvImrY7.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/a9nSour.jpg" alt="Third slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/K4VusMr.jpg" alt="Fourth slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/gWJj3dI.jpg" alt="Fifth slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/cGKWNfv.jpg" alt="Sixth slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/tlzMIxH.jpg" alt="Seventh slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/EliUAqd.jpg" alt="Eighth slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/5ob7uGp.jpg" alt="Ninth slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/tSBB02F.jpg" alt="Tenth slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/ccP2bbO.jpg" alt="Eleventh slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/OUWiXCy.jpg" alt="Twelfth slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/D3GfCuy.jpg" alt="Thirteenth slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/Rd7dZsf.jpg" alt="Fourteenth slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/DCv9eVW.jpg" alt="Fifteenth slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/yDu3Xrv.jpg" alt="Sixteenth slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/0GrtUdy.jpg" alt="Seventeenth slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://i.imgur.com/sMtT2Tu.jpg" alt="Eighteenth slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
    <script>
        $(function(){
          $('#carouselExampleIndicators').carousel();
        });
    </script>
</div>
<div>


</div>
<div id="slider">
    <div id="custom-handle" class="ui-slider-handle">

    </div>
</div>
</html>

Проблема, с которой я сталкиваюсь, заключается в том, что когда я загружаю страницу локально через jekyll, страница не загружает всеизображения слайдера.Иногда он показывает только некоторые изображения, иногда одно изображение, а для остальных изображение вообще отсутствует.

Технические характеристики: _config.yml: 

title: Your awesome title
email: your-email@example.com
description: >- 
baseurl: "" 
url: "" 
twitter_username: jekyllrb
github_username:  jekyll
markdown: kramdown
theme: minima
plugins:
  - jekyll-feed

Я хочу, чтобы сайт работал.Более того, я хочу знать, почему это не работает, и что такое внутренняя работа jekyll, которая мешает ему работать таким образом.

...