2015-11-19 3 views
0

Акцент на специфический фото здесь.Показать одиночный SPECIFIC Instagram фото - возможно?

Я знаю все плагины Instagram и API Instagram, однако я пытаюсь выяснить способ отображения отдельной фотографии с Instagram. Не по тегу или по имени пользователя, но предпочтительно от URL-адреса Instagram или даже с идентификатором фотографии.

Я хочу что-то похожее на это: (где Instagram фото охватывает фон дел)

<div class="instagram-photo" 
    style="background-image:URL(*instagram_photo_url_here*); 
      background-size:cover"> 
</div> 

Я рад ссылку на фотографию для фото кредита и тому подобного.

Возможно ли это? Я искал часы, и ничего не вышло, я должен что-то игнорировать.

+0

Я не уверен, что проблема есть. Просто введите URL-адрес фотографии. Пример со случайной страницей Instagram: [Fiddle] (http://jsfiddle.net/MrLister/n35m14b6/1/). Где это происходит? –

+0

Подожди минутку, я должен был спросить об этом немедленно. Какая фотография? –

+0

Где вы получили URL-адрес фотографии Instagram? Например, эта фотография - https://www.instagram.com/p/8mb1rjun86/ – Devin

ответ

1

мне потребовался некоторое время, чтобы придумать ответ, Instagram позволяет легко получить средства массовой информации непосредственно с помощью Media redirect, путем добавления /media/?size={size} конца любого фото PermaLink

Желаемой размер результирующих СМИ. Поддерживаемые значения: t (thumbnail), m (средний), l (большой). По умолчанию m.

Примеры;

И если вы LASY или хотите насыпной изменение сразу, я написал фрагмент кода JQuery для этого; Demo

Вот ваш окончательный HTML для вашей попытки

body { 
 
    padding:10px; 
 
} 
 
.instagram-photo { 
 
    display:block; 
 
    margin-bottom:15px; 
 
    background:#ffffff; 
 
    height:500px; 
 
    border:2px solid #ddd; 
 
}
<div class="instagram-photo" style="background-image: url(https://instagram.com/p/-FP1PjBQRd/media/?size=l); background-size: cover;"></div> 
 
    <div class="instagram-photo" style="background-image: url(https://instagram.com/p/8l2vIrhQQ_/media/?size=l); background-size: cover;"></div> 
 
    <div class="instagram-photo" style="background-image: url(https://instagram.com/p/-XNiICnxXO/media/?size=l); background-size: cover;"></div> 
 
    <div class="instagram-photo" style="background-image: url(https://instagram.com/p/cn5KZWmJp1/media/?size=l); background-size: cover;"></div> 
 
    <div class="instagram-photo" style="background-image: url(https://instagram.com/p/7TDiYJBQdf/media/?size=l); background-size: cover;"></div> 
 

+1

Вау, спасибо, что нашли время и силы сделай это. Это именно то, что я искал и прекрасно работает! – Devin

Смежные вопросы