VPF::Галлерея - флэшки вместо имеджей.

Arat

Дата 30.9.2007, 19:01 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 23
Регистрация: 11.7.2007

Репутация: нет
Всего: 1

Следующий код небольшой галереи, которая показывает имеджи в формате .jpg не перезагружая всю страницу, а меняя только сам имедж.

Код


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Gallery</title>

<script  language="javascript">
var mypics=new Array(7) // массив где хранятся имена картинок
mypics[0] = "1.jpg";
mypics[1] = "2.jpg";
mypics[2] = "3.jpg";
mypics[3] = "4.jpg";
mypics[4] = "5.jpg";
mypics[5] = "6.jpg";
mypics[6] = "7.jpg";
/////////////////////////////

var foldername = "images"; //имя директории где хранятся картинки
var currentpicindex = 0; // начальный индекс картинки которую нужно показывать при запуске
var imgobjectid = "PicObj"; //ID картинки <img...

function next()
{
    currentpicindex = currentpicindex + 1;

    if(currentpicindex > mypics.length - 1)
    {
        currentpicindex = 0;
    }
    
    document.getElementById(imgobjectid).src = foldername + "/" + mypics[currentpicindex];
}

function previous()
{
    currentpicindex = currentpicindex - 1;
    if(currentpicindex < 0)
    {
         currentpicindex = mypics.length-1;
    }
    
    document.getElementById(imgobjectid).src = foldername + "/" + mypics[currentpicindex];

}

</script>
</head>

<body>
<center>
<table>
  <tr>
    <td colspan = "2" align = "center">
    
         <img id = "PicObj" src = "images/1.jpg" />
  
     </td>
   </tr>
  
</table>
</center>

<center>
<table>
  <tr>
    <td>
    
          <a href = "#" onclick = "previous();"> Previous </a>
    
    </td>
    
    <td>
        
        <a href = "#" onclick = "next();"> Next </a>
    
    </td>
  </tr>
</table>
</center>
</body>
</html>

Вопрос:

1) Как сделать точно такую же галерею, но вместо имеджей в формате .jpg, что бы стояли небольшие флэшки в формате .swf, которые та же как и имеджи можно листать внутри окна с помощью ссылок некст, превью?

2) Возможно ли перемешать вместе .jpg и .swf, в данной галлереи?

Заранее спасибо.

Это сообщение отредактировал(а) Arat - 30.9.2007, 19:25

dsCode

Дата 30.9.2007, 23:21 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 565
Регистрация: 8.9.2007
Где: Saint-Petersburg

Репутация: 19
Всего: 26

Интересный случай =) Насчет первого вопроса - нет, нельзя менять флеш заменой src. Но! С другой стороны можно заменить innerHTML у parent-div'a =) Правда, предзагрузки не будет.

Код


<div id="container">
  <embed id="flashobj" src="test.swf"></embed>
</div>
<input type="button" id="prev" value="previous"
  onClick="
    document.getElementById('container').innerHTML = '<embed id=\'flashobj\' src=\'test.swf\'></embed>';
    return true;
  "
/>
<input type="button" id="next" value="next"
  onClick="
    document.getElementById('container').innerHTML = '<embed id=\'flashobj\' src=\'video.swf\'></embed>';
    return true;
  "
/>
<input type="button" id="next" value="next image"
  onClick="
    document.getElementById('container').innerHTML = '<img src=\'image.gif\' />';
    return true;
  "
/>

Это сообщение отредактировал(а) dsCode - 30.9.2007, 23:25

--------------------

the .code inside
:my music

Arat

Дата 30.9.2007, 23:53 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 23
Регистрация: 11.7.2007

Репутация: нет
Всего: 1

Честно говоря, не очень понял пример. Если нетрудно подробнее и весь код страницы, сорри я новичок пока путаюсь.

dsCode

Дата 1.10.2007, 11:19 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 565
Регистрация: 8.9.2007
Где: Saint-Petersburg

Репутация: 19
Всего: 26

Arat, собственно, этого кода достаточно, "весь код страницы" в данном случае будет выглядеть, если добавить

Код


<html>
  <head>
    <title>test</title>
  </head>
  <body> 
    здесь тот код 
  </body>
</html>

В div'e "container" находится наш объект (изначально флэшка - "test.swf"). Дальше идут три кнопки, по нажатию на которые просходит заменна innerHTML'a div'a "container" на:

1. <embed id="flashobj" src="test.swf"></embed> (по клику первой кнопи)
2. <embed id="flashobj" src="video.swf"></embed> (... второй кнопки)
3. <img src="image.gif" /> (... третьей)

--------------------

the .code inside
:my music

Arat

Дата 1.10.2007, 19:09 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 23
Регистрация: 11.7.2007

Репутация: нет
Всего: 1

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

dsCode, может добьем до конца?

dsCode

Дата 1.10.2007, 20:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 565
Регистрация: 8.9.2007
Где: Saint-Petersburg

Репутация: 19
Всего: 26

Arat, что-то вроде этого:

Код


<html>
  <head>
    <title>ds [.code]</title>
    <script type="text/javascript">

      // данные
      var displayData = {
        0: {
          object: 'test.swf',
          type: 'flash'
        },
        1: {
          object: 'video.swf',
          type: 'flash'
        },
        2: {
          object: 'admin.gif',
          type: 'img'
        }
      };

      // индекс объекта
      var index = 0;

      var MAX = 2;
      
      
      // функция листает "туда-сюда" =), исходя из direction (prev/next)
      // данные берутся из объекта (displayData) по индексу (index)
      // по типу (type) в каждому объекте объекта displayData
      // определяется какой тег (img/embed) писать в innerHTML diva "container"
      function list(direction) {
        index = (
          direction == 'prev'
            ? (index == 0 ? 0 : index - 1)
            : (index == MAX ? MAX : index + 1)
        );
        document.getElementById('container').innerHTML = (
          displayData[index].type == 'img'
            ? '<img src="' + displayData[index].object + '" />'
            : (displayData[index].type == 'flash'
                ? '<embed src="' + displayData[index].object +  '"></embed>'
                : 'неизвестный тип'
              )
        );
      }
    </script>
  </head>
  <body>
    <div id='container'></div>
    <input type="button" id="prev" value="previous"
      onClick="
        list('prev');
        return true;
      "
    />
    <input type="button" id="next" value="next"
      onClick="
        list('next');
        return true;
      "
    />
  </body>
</html>

--------------------

the .code inside
:my music

Arat

Дата 1.10.2007, 22:09 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 23
Регистрация: 11.7.2007

Репутация: нет
Всего: 1

Спасибо Огромное!!!!!!!!!!!!

Не представляешь как меня выручил smile

, я твой должник smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »