-1

Помогите разобраться. Может как то подправить скрипт что бы можно было фотки самому добавлять. Кода там очень много и он в нескольких файлах. Так что здесь я его выложить не смогу. Вот

ссылка на страницу автора: https://ramon.codes/projects/zuck.js/index.html

ссылка на гит хаб: https://github.com/ramon82/zuck.js

ссылка на демо: https://ramon.codes/demo/zuck.js/react.sample.html

<html>

zuck.js

<link rel="icon" href="ICON.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />

<!-- demo styles -->
<link rel="stylesheet" href="demo/style.css">

<!-- lib styles -->
<link rel="stylesheet" href="dist/zuck.min.css">

<!-- lib skins -->
<link rel="stylesheet" href="dist/skins/snapgram.css">
<link rel="stylesheet" href="dist/skins/vemdezap.css">
<link rel="stylesheet" href="dist/skins/facesnap.css">
<link rel="stylesheet" href="dist/skins/snapssenger.css">

 

<!-- <a href="https://ramon.codes/projects/zuck.js" target="_blank" class="disclaimer">
  <img src="ICON.png" alt="zuck.js logo" />

  <p>This a demonstration of <strong>zuck.js</strong> javascript library.</p>
  <p>Not associated with Facebook, Instagram, WhatsApp or Snapchat.</p>
</a> -->

<div id="stories" class="storiesWrapper"></div>

<div class="skin">
  Выберите тему:

  <select id="skin" onchange="changeSkin(this.options[this.selectedIndex].value);">
    <option value="Snapgram">Snapgram (without fullscreen)</option>
    <option value="FaceSnap">FaceSnap (with fullscreen)</option>
    <option value="VemDeZAP">VemDeZAP (timeline + arrows)</option>
    <option value="Snapssenger">Snapssenger (with previews)</option>
  </select>
</div>

<script src="dist/zuck.min.js"></script>
<script src="demo/script.js"></script>

<script>
  var currentSkin = getCurrentSkin();
  var stories = new Zuck('stories', {
    backNative: true,
    previousTap: true,
    skin: currentSkin['name'],
    autoFullScreen: currentSkin['params']['autoFullScreen'],
    avatars: currentSkin['params']['avatars'],
    paginationArrows: currentSkin['params']['paginationArrows'],
    list: currentSkin['params']['list'],
    cubeEffect: currentSkin['params']['cubeEffect'],
    localStorage: true,
    stories: [
      Zuck.buildTimelineItem(
        "ramon", 
        "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/1.jpg",
        "Ramon",
        "https://ramon.codes",
        timestamp(),
        [
          ["ramon-1", "photo", 3, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/1.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/1.jpg", '', false, false, timestamp()],
          ["ramon-2", "video", 0, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/2.mp4", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/2.jpg", '', false, false, timestamp()],
          ["ramon-3", "photo", 3, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/3.png", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/3.png", 'https://ramon.codes', 'Visit my Portfolio', false, timestamp()]
        ]
      ),
      Zuck.buildTimelineItem(
        "gorillaz",
        "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/2.jpg",
        "Gorillaz",
        "",
        timestamp(),
        [
          ["gorillaz-1", "video", 0, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/4.mp4", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/4.jpg", '', false, false, timestamp()],
          ["gorillaz-2", "photo", 3, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/5.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/5.jpg", '', false, false, timestamp()],
        ]
      ),
      Zuck.buildTimelineItem(
        "ladygaga",
        "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/3.jpg",
        "Lady Gaga",
        "",
        timestamp(),
        [
          ["ladygaga-1", "photo", 5, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/6.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/6.jpg", '', false, false, timestamp()],
          ["ladygaga-2", "photo", 3, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/7.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/7.jpg", 'http://ladygaga.com', false, false, timestamp()],
        ]
      ),
      Zuck.buildTimelineItem(
        "starboy",
        "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/4.jpg",
        "The Weeknd",
        "",
        timestamp(),
        [
          ["starboy-1", "photo", 5, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/8.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/8.jpg", '', false, false, timestamp()]
        ]
      ),
      Zuck.buildTimelineItem(
        "riversquomo",
        "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/5.jpg",
        "Rivers Cuomo",
        "",
        timestamp(),
        [
          ["riverscuomo", "photo", 10, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/9.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/9.jpg", '', false, false, timestamp()]
        ]
      )
    ]
  });
</script>

1 ответ 1

1

Хай, вроде всё просто, в Zuck.buildTimelineItem(); указываешь название и ссылку на картинку.

4
  • 1
    А вы не могли бы описать более подробно, а ещё лучше -- с примером кода?
    – A K
    29 сен 2019 в 18:17
  • код здесь не возможно разместить. его очень много. В вопросе я дал ссылки на код. В принципе всё правильно в документе index.html указан путь к картинкам. Но вот я указываю его без http прямо к папке img на локальном пк и ничего не работает. как такое решить? Если пропишу ссылку на картинку в из сети то норм работает.
    – vvv7220
    30 сен 2019 в 4:24
  • Пробую вместо http прописывать src, href, url ничего не получается. Как указать путь к картинкам в папке img на локальном пк?
    – vvv7220
    30 сен 2019 в 4:32
  • попробуй просто '/imgaes/1.jpg' 30 сен 2019 в 9:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.