добавление html-текста к увеличенному слайду изображения jquery

Question

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

Это их демонстрационная страница: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html.

html может находиться только вместо текста "медиа-сервер (ве) сервер" в демоверсии.

Я также пытаюсь добавить в текст хорошую анимацию.

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

Мне кажется, что их API не совсем понятен при реализации того, что я сказал.

Кто-нибудь есть?

Answer 1

У вас есть пример страницы, над которой вы работаете - код или живой пример?

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

 [ // Slideshow Images
{image : 'http://example.com/example.jpg', title : 'ADD A CAPTION HERE', thumb : 'http://example.com/example.jpg', url : 'http://www.example.com'}
]

Чтобы добавить наложение текста для всех изображений:

Попробуйте создать div в своем основном теле -

<div id="message-box">Hi, this is my text.</div>

Тогда придайте div стиль -

#message-box {
  z-index: 9999;
  float: left;
  margin-left: 30px;
}

Z-индекс должен обеспечивать отображение div в верхней части увеличенного фонового изображения.

Answer 2

Спасибо собакам за ответ, я улучшаю скрипт таким образом:

в первой строке supersized.shutter.js добавьте это

desctext = function() {
    var projID = api.getField('proj_id');
        var url = "slide_return.php?id="+projID;
        $('#brief_holder').load(url);
};

, затем после строки

 _init : function(){

добавьте это, чтобы загрузить описание первого изображения

desctext;  

после строки

 if (vars.slide_current.length){
            $(vars.slide_current).html(vars.current_slide + 1);
        }

добавить

 desctext;

, теперь то же самое из сценария собак,включите идентификационный номер описания следующим образом:

slides:[// Slideshow Images
            {image : 'images/index_1.jpg', proj_id : '1'},
            {image : 'images/index_2.jpg', proj_id : '2'},
            {image : 'images/index_3.jpg', proj_id : '3'}

]

создайте страницу с именем slide_return.php с таким кодом:

switch($_GET['id']){
case "1":
    echo "<h1><a href='#'>Text Link for slide 1</a></h1>";
break;
case "2":
    echo "<h1><a href='#'>Text Link for slide 2</a></h1>";
break;
case "3":
    echo "<h1><a href='#'>Text Link for slide 3</a></h1>";
break;

}

наконец поместите пустой тег div #brief_holder на той же странице слайда.

Answer 3

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

Я изменил сценарий для каждого слайда, добавив в него идентификационный номер проекта, напримерэто:

{image : 'content/pic1.jpg', title : 'title here', url : '', proj_id : '#projectID#'},

(имейте в виду, что это только пример ... я использую asp для динамического заполнения списка слайдов)

затем в supersized.shutter.js я добавил послеline

afterAnimation : function(){

this

var projID = api.getField('proj_id');
var url = "project_brief.asp?id="+projID;
$('#brief_holder').load(url);

, где #brief_holder - пустой div, а project_brief.asp извлекает описание из источника.

Answer 4

Вы можете написать на странице все, что захотите, например <ul id="demo-block">....</ul>, если у вас есть оригинальная страница demo.html, этот блок ul там ..