Создать ответ 
Скрипт спойлера с динамической загрузкой
Автор Сообщение
angella Не на форуме
Рядовой
*

Сообщений: 9
У нас с: Aug 2016
Сообщение: #1
Скрипт спойлера с динамической загрузкой
Blush Вот тут в комментариях к
"Скрипт спойлера с динамической загрузкой изображений "
уже спрашивали о том, чтобы загружалось другое содержимое, т.е. не только картинки, и ответ есть, НО вариант с загрузкой отдельных страниц в спойлер мне не подходит. Можно ли как-то переделать этот скрипт для подгрузки <div> внутри которого может быть различное содержимое, не только картинки, но и видео с ютюб к примеру.
28.08.2016 17:44:38
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #2
RE: Скрипт спойлера с динамической загрузкой
Основная цель данного скрипта - динамическая загрузка изображений. Т.е. при загрузке странички изображения под спойлером не загружаются, а загружаются лишь при открытии спойлера.

Если Вам необходимо просто скрыть какое-либо содержимое странички под спойлер, которое появится при раскрытии спойлера, то Вам лучше воспользоваться скриптом спойлера с плавным открытием и скрытием содержимого.
28.08.2016 18:11:05
Найти все сообщения Цитировать это сообщение
angella Не на форуме
Рядовой
*

Сообщений: 9
У нас с: Aug 2016
Сообщение: #3
RE: Скрипт спойлера с динамической загрузкой
(28.08.2016 18:11:05)Admin писал(а):  Основная цель данного скрипта - динамическая загрузка изображений. Т.е. при загрузке странички изображения под спойлером не загружаются, а загружаются лишь при открытии спойлера.

Если Вам необходимо просто скрыть какое-либо содержимое странички под спойлер, которое появится при раскрытии спойлера, то Вам лучше воспользоваться скриптом спойлера с плавным открытием и скрытием содержимого.

Не-не я поэтому и спрашиваю о загрузки содержимого не сразу, т.к. видео может быть не одно и они могут весить очень много, но смотреть его возможно и не будут.

Вот конкретно моя задача - сделать страницу с текстовой инструкцией и 2-мя спойлерами под ней:
в одном будут скришоты к тексту, в другом эта же инструкция, но в видеоформате.

Получается, что пользователю может и не понадобится ни один спойлер открывать, быстро читает, да пойдет дальше, поэтому загружать все то внутри сразу не хочется.
28.08.2016 18:30:37
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #4
RE: Скрипт спойлера с динамической загрузкой
Для динамической загрузки видео можно сделать по аналогии с изображениями:
Код:
<style type="text/css">
.spoiler_body { display:none; font-style:italic; }
.spoiler_head {
     cursor:pointer;
     font-weight:bold;
     text-decoration:underline;
     color:#000099;
}
</style>

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_head').click(function(){
     $(this).next('.spoiler_body').fadeToggle('slow');
     $(this).next().children('img').each(function(){
         $(this).attr({'src':$(this).attr('alt')});
     });
     $(this).next().children('iframe').each(function(){
         $(this).attr({'src':$(this).attr('name')});
     });
});
});
</script>

<div class="spoiler_head">Скриншоты (кликните для открытия/закрытия)</div>
<div class="spoiler_body">
<img src="image/pixel.gif" alt="image/img_1.png">
<img src="image/pixel.gif" alt="image/img_2.png">
</div>

<div class="spoiler_head">Видеоинструкция (кликните для открытия/закрытия)</div>
<div class="spoiler_body">
<iframe width="560" height="315" src="image/pixel.gif" name="https://www.youtube.com/embed/yVhzKSGH2As" frameborder="0" allowfullscreen></iframe>
</div>

Для подгрузки разнородного содержимого (div-ы, тексты, картинки, видео) вперемешку лучше использовать Ajax запрос HTML-данных .load()
28.08.2016 18:54:35
Найти все сообщения Цитировать это сообщение
angella Не на форуме
Рядовой
*

Сообщений: 9
У нас с: Aug 2016
Сообщение: #5
RE: Скрипт спойлера с динамической загрузкой
Спасибо, то что надо.
28.08.2016 19:06:56
Найти все сообщения Цитировать это сообщение
jonspy Не на форуме
Рядовой
*

Сообщений: 1
У нас с: Feb 2017
Сообщение: #6
RE: Скрипт спойлера с динамической загрузкой
(28.08.2016 18:54:35)Admin писал(а):  Для динамической загрузки видео можно сделать по аналогии с изображениями:
Код:
<style type="text/css">
.spoiler_body { display:none; font-style:italic; }
.spoiler_head {
     cursor:pointer;
     font-weight:bold;
     text-decoration:underline;
     color:#000099;
}
</style>

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_head').click(function(){
     $(this).next('.spoiler_body').fadeToggle('slow');
     $(this).next().children('img').each(function(){
         $(this).attr({'src':$(this).attr('alt')});
     });
     $(this).next().children('iframe').each(function(){
         $(this).attr({'src':$(this).attr('name')});
     });
});
});
</script>

<div class="spoiler_head">Скриншоты (кликните для открытия/закрытия)</div>
<div class="spoiler_body">
<img src="image/pixel.gif" alt="image/img_1.png">
<img src="image/pixel.gif" alt="image/img_2.png">
</div>

<div class="spoiler_head">Видеоинструкция (кликните для открытия/закрытия)</div>
<div class="spoiler_body">
<iframe width="560" height="315" src="image/pixel.gif" name="https://www.youtube.com/embed/yVhzKSGH2As" frameborder="0" allowfullscreen></iframe>
</div>

Для подгрузки разнородного содержимого (div-ы, тексты, картинки, видео) вперемешку лучше использовать Ajax запрос HTML-данных .load()

Ребята подскажите пожалуйста как сделать так что бы можно было видео не с ютюба вставлять а кодом когда вставляю код с ютюба все работает а просто код видео прогружает без динамической загрузки. Подскажите что поправить в коде нужно.

Спасибо я сам разобрался.
(Последний раз сообщение было отредактировано 16.02.2017 в 13:01:59, отредактировал пользователь jonspy.)
16.02.2017 12:51:52
Найти все сообщения Цитировать это сообщение
angella Не на форуме
Рядовой
*

Сообщений: 9
У нас с: Aug 2016
Сообщение: #7
RE: Скрипт спойлера с динамической загрузкой
Админ, вы можете ещё раз обратить внимание на эту тему?
Я хочу спросить кое-что на тему динамической загрузки через ajax-запрос .load().
Я посмотрела вот этот комментарий и хочу спросить, можно ли сделать так, чтобы spoiler_head было несколько, а spoiler_body для всех одно. Можно ли сделать так, чтобы разное содержимое загружалось бы в один и тот же блок, а не в разные, как сейчас.
То есть, чтобы это уже был не спойлер, а что-то вроде перехода по страницам сайта без перезагрузки самой страницы, где spoiler_head это пункт меню.
03.05.2017 22:44:26
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru