Блог

Главная - Вопросы по программированию - Как использовать php для каждого внутри javascript

Как использовать php для каждого внутри javascript

#javascript #php

#javascript #php

Вопрос:

Я работаю над получением историй из Instagram и показываю их на проекте веб-сайта. Итак, я закончил получать истории с помощью API из facebook. У меня также есть код javascript для показа этих историй, как это делает instagram. Но вот мой вопрос>

Как я могу поместить свои переменные php внутрь javascript? Как javascript добавляет или удаляет истории. Я имею в виду, что мне нужен какой-то «для каждого цикла»

Мои коды переменных php;

 <?php foreach ( $stories as $story ) : // loop over each story element ?>
            <?php if ( 'VIDEO' == $story['media_info']['media_type'] ) : // story media is a video ?>
                <div>
                    <video controls poster="<?php echo $story['media_info']['thumbnail_url']; ?>" style="max-width:300px">
                        <source src="<?php echo $story['media_info']['media_url']; ?>" />
                    </video>
                </div>
            <?php elseif ( 'IMAGE' == $story['media_info']['media_type'] ) : // story media is an image ?>
                <div>
                    <img src="<?php echo $story['media_info']['media_url']; ?>" style="max-width:300px" />
                </div>
            <?php endif; ?>
            <div>
                <b>
                    <?php echo $story['media_info']['username']; ?>
                </b>
            </div>
            <a href="<?php echo $story['media_info']['permalink']; ?>" target="_blank">
                View on Instagram
            </a>
        <?php endforeach; ?>

Мой код javascript;

   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()
        ]
      ]
    )
  ]

Комментарии:

1. Вы имеете в виду использование github.com/ramon82/zuck.js

2. да, но мне нужно внедрить этот php внутрь zuck.js

Ответ №1:

Просто используйте PHP в качестве прокси-сервера и передайте JSON в JS

В противном случае вам придется сделать что-то вроде этого

 {
  id: "storyid", // story id
  photo: "..", // story photo (or user photo)
  link: "", // story link (useless on story generated by script)
  lastUpdated: "", // last updated date in unix time format
  seen: false, // set true if user has opened

  items: [ // array of items
    // story item example
<?php 
$cnt = 0;
foreach ( $stories as $story ) : // loop over each story element 
?> {
      id: "item<$cnt   ?>", // item id
      type: "<?= $story['media_info']['media_type']  ?>", // photo or video
      length: 10, // photo timeout or video length in seconds - uses 3 seconds timeout for images if not set
      src: "<?=  $story['media_info']['media_url']; ?>", // photo or video src
      preview: "", // optional - item thumbnail to show in the story carousel instead of the story defined image
      link: "<?= $story['media_info']['permalink'];?>", // a link to click on story
      linkText: "", // link text
      time: "", // optional a date to display with the story item. unix timestamp are converted to "time ago" format
      seen: false // set true if current user was read,
      [customKey]: "", //  custom-value
      [anotherCustomKey]: "" // another-custom-value
    }
<?php endforeach; ?>    
  ]
}
Метки: