Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Галерея, С пред-кешированием и прокруткой 
:(
    Опции темы
Palette
Дата 3.3.2005, 07:32 (ссылка)    |    (голосов: 0) Загрузка ... Загрузка ... Быстрая цитата Цитата


Unregistered











Привет всем. Вот, хотелось бы найти такой скрипт. В галерее, при нажатии на картинку, открывается новое окно. Оно не должно содержать никаких панелей, скроллинга и тому подобного, кроме заголовка страницы. В окне должна появиться та же картинка, но большего размера. Самое главное, что бы в этом же окне, кроме нее, мог находиться текст. Например, размер картинки, ее название и тд. Или комментарии посетителей, которые можно редактировать. Кроме того, должны быть кнопки Вперед, Назад, и, голосование по этому изображению. На каком языке может быть такой скрипт? И если кто-то знает, где такое можно найти, подскажите, плиз.
  Вверх
Се ля ви
Дата 3.3.2005, 11:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Java/SOAрхитектор
****


Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 5
Всего: 127



Просто открываешь новое окно и генеришь весь контент. Я в своё время писал, сдирай отсюда - http://www.mirtour.ru/4clients/countries/Bulgary/ (там на нажатии на картинку "Галерея" - вызов функции):
Код
   function galaryWindowOpen(PicSrcPath, thisPicNumber, maxPictureNumber, width, height, title){
   
       galaryWindow = window.open(
           '',
           'galaryWindow',
           'channelmode=0,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0');
       
       galaryWindow.document.clear();
       
       galaryWindow.resizeTo(width, height);
       galaryWindow.moveTo( (screen.width - width) / 2, 100);
       
       galaryWindow.focus();
       
       //          
       //galaryWindow.document.writeln('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'); //         -                      
       galaryWindow.document.writeln('<html xmlns="http://www.w3.org/1999/xhtml"><head><title>' + title + '</title>');
       
       galaryWindow.document.writeln(    '<style><!--/*[CDATA[*/');
       galaryWindow.document.writeln(        'img.hidden {visibility: hidden;}');
       galaryWindow.document.writeln(        'img.visible {visibility: visible;}');
       galaryWindow.document.writeln(        'img {bodrer: 0px; margin: 0px; padding: 0px;}');
       galaryWindow.document.writeln(        'span.thisPic {cursor: text;}');
       galaryWindow.document.writeln(        'span.otherPic {cursor: pointer; color: #FF6000; font-weight: bold;}');
       galaryWindow.document.writeln(    '/*]]*/--></style>');
       
       galaryWindow.document.writeln(    '<script><!--//[CDATA[');
       galaryWindow.document.writeln(        'var counter = new Number(' + thisPicNumber + ');');
       galaryWindow.document.writeln(        'var maxPictureNumber = new Number(' + maxPictureNumber + ');');
       galaryWindow.document.writeln(        'function swichPic(picNumber){');
       galaryWindow.document.write(            'document.getElementById(\'picture\').setAttribute(');
       galaryWindow.document.write(                '\'src\',');
       galaryWindow.document.writeln(                '\''+ PicSrcPath + '\' + picNumber + \'.jpg\');');
       galaryWindow.document.writeln(            'document.getElementById(\'linkPic_\' + counter).className = \'otherPic\';');
       galaryWindow.document.writeln(            'counter = picNumber;');
       galaryWindow.document.writeln(            'document.getElementById(\'linkPic_\' + counter).className = \'thisPic\';');
       galaryWindow.document.writeln(            'document.getElementById(\'arrowRight\').className = ((counter < maxPictureNumber) ? \'visible\' : \'hidden\'); ');
       galaryWindow.document.writeln(            'document.getElementById(\'arrowLeft\').className = ((counter.valueOf()) ? \'visible\' : \'hidden\'); ');
       galaryWindow.document.writeln(        '}');
       galaryWindow.document.writeln(    '//]]--></script>');
       
       galaryWindow.document.writeln(    '</head><body><table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;"><tbody><tr><td style="text-align: center;">');
       
       //              
       galaryWindow.document.writeln(        '<img id="picture" src="' + PicSrcPath + '' + thisPicNumber + '.jpg" />');
       
       //   ,                              
       galaryWindow.document.writeln(        '</td></tr><tr style="height: 100%;"><td></td></tr><tr><td style="text-align: center;">');
       
       //                
       galaryWindow.document.writeln(        '<img id="arrowLeft" class="' + ((thisPicNumber) ? 'visible' : 'hidden') + '" src="/img/4travelbureaus/proposals/bulgary/previous.gif" style="cursor: pointer;"');
       galaryWindow.document.writeln(            'onClick="swichPic(counter.valueOf() - 1);" />');
       
       //                
       galaryWindow.document.write(        '<img id="arrowRight" class="' + ((thisPicNumber < maxPictureNumber) ? 'visible' : 'hidden') + '" src="/img/4travelbureaus/proposals/bulgary/next.gif" style="cursor: pointer;" ');
       galaryWindow.document.writeln(            'onClick="swichPic(counter.valueOf() + 1);" /><br />');
       
       //                        
       for(var i = new Number(0); i <= maxPictureNumber; i++){
       
           galaryWindow.document.write(    '[<span id="linkPic_' + i + '"');
           galaryWindow.document.write(        'onClick="swichPic(' + i + ');"');
           galaryWindow.document.writeln(        'class="' + ((i == thisPicNumber) ? 'thisPic' : 'otherPic') + '">' + (i + 1) + '</span>]');
       }
       
       galaryWindow.document.writeln('</td></tr></tbody></table></body></html>');
       galaryWindow.document.close();
   }


Ну а голосовалку - это уже на серверной стороне писать надо - это вопрос к PHP`шникам или Perl`овикам...


--------------------
  )
 (
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...
PM MAIL WWW Skype GTalk   Вверх
Palette
Дата 4.3.2005, 08:52 (ссылка)    |    (голосов: 0) Загрузка ... Загрузка ... Быстрая цитата Цитата


Unregistered











Се ля ви Большое спасибо за ответ, но у меня возникла проблема. Что то у меня ничего не получается с этим скриптом. smile Я не так давно начала пользоваться ими, и все до этого момента было гладко. Наверное, потому, что скрипты были простыми. Поправила, что надо и все работает. А с этим бьюсь, бьюсь, и ничего не выходит. Я дико сори, не могли бы Вы мне объяснить подробно, как чайнику, что и как делать, если есть время. Куда и как вставлять скрипт и как отредактировать. Заранее благодарю.
  Вверх
Aliance
Дата 4.3.2005, 18:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



2 Palette
1) Зарегистрируйтесь и общайтесь с полными возможностями.
2) Раздел работы тут. В оснальных разделах обсуждаются скрипты, а не пишуться под заказ. Покажите что у вас не получилось, мы укажем вам вашу ошибку и т.п.

Цитата(Palette @ 4.3.2005, 08:52)
Куда и как вставлять скрипт и как отредактировать. Заранее благодарю.

Редактировать в текстовом редакторе. Вставлять на страницу с помощью тегом script

PM MAIL WWW ICQ Skype   Вверх
Се ля ви
Дата 5.3.2005, 14:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Java/SOAрхитектор
****


Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 5
Всего: 127



Palette

Во-первых, прежде всего, если вы не очень хорошо разбираетесь в технологии, лучше тогда задать вопрос в подраздел "для начинающих" - так я и другие будут лучше представлять себе ваш уровень и давать более развёрнутые объяснения.

Во-вторых, в таких случаях помогает такой простой приём - сохраняете страницу себе полностью и разбираетесь, что в ней, как и почему smile Менять, смотреть что получилось - и т.д. Очень полезно бывает...

Вообще-то вам нужно записать эту функцию либо в отдельный файл, и подгрузить его выражением <script type="text/javascript" src="[url]" ></script>, либо просто вбить её в секцию script в секции head.

Затем нужно положить файлы галереи в какую-то папку и назвать картинки номерами, начиная нумерацию с 0. Если они они у вас не с расширением "jpg", то поменяйте внутри функции эту строчку на "gif", воспользовавшись для этого поиском.

Затем надо вызвать функцию, например, в ссылке, передав ей последовательно следующие параметры:
1. Адрес папки, где лежать картинки
2. Номер картинки, которую надо показать в начале
3. Номер последней картинки того диапазона, которые нужно показать (никто не запрещает показывать не все картинки в папке, а только первые 5 или 10...)
4. Размер окна в пикселах по ширине
5. Размер окна в пикселах по высоте (для указания размеров учитывайте максимальные размеры картинок галереи).
6. Титл - заголовок окна для галереи.

Если не знаешь, как вызвать функцию из ссылки, вот так:
Код

<a href="javascript:galaryWindowOpen('/images/gallery/gal1/', 0, 32, 320, 240, 'Содержание первой галереи:');"



--------------------
  )
 (
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...
PM MAIL WWW Skype GTalk   Вверх
Palette
Дата 10.3.2005, 00:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Се ля ви

Цитата
Во-первых, прежде всего, если вы не очень хорошо разбираетесь в технологии, лучше тогда задать вопрос в подраздел "для начинающих" - так я и другие будут лучше представлять себе ваш уровень и давать более развёрнутые объяснения.

Я просто переоценила свои возможности. В следующий раз обещаю исправиться smile

Цитата
Во-вторых, в таких случаях помогает такой простой приём - сохраняете страницу себе полностью и разбираетесь, что в ней, как и почему  Менять, смотреть что получилось - и т.д. Очень полезно бывает...

Я именно так всегда и делаю. А потом смотрю во FrontPage, как там и что. Но в данном случае, я сохранила страницу с галереей, но у меня выпрыгивает окошко с ошибкой. Говорит, что не может подобрать кодировку. Но не в этом проблема. Я начала изучать код, и, что бы легче было разбираться, удалила все, кроме картинки, ведущей в галерею. Но, теперь начала выскакивать другая ошибка, что-то там об отсутствии объекта. Я подумала, что удалила, что-то лишнее, но, оказалось, что ошибка присутствует, если даже ничего не делать со страницей. Вот, такие вот, пироги smile

Идея сама по себе хорошая и мне даже удалось найти подобный скрипт (без голосования, конечно), но пришлось от всего этого отказаться. Оказалось что такая галерея, как я задумала, совершенно не подходит для моего сайта. Причин несколько, перечислять долго. Поэтому села и стала соображать, что же такое придумать. И вот надыбала один скрипт, чуть его переделала (это был скрол меню, в котором заменила ссылки, на картинки) и второй, интересную такую галерею. Теперь появилась задача, совместить эти два скрипта. Вот тут выложила их,

www.smv.od.ua

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

Это сообщение отредактировал(а) Palette - 10.3.2005, 00:06
PM MAIL   Вверх
Гость_Palette
Дата 12.3.2005, 01:33 (ссылка)    |    (голосов: 0) Загрузка ... Загрузка ... Быстрая цитата Цитата


Unregistered











Привет всем. Люди, ну помогите, плиз, а то сама не соображу, как это сделать. Или скажите, что это нельзя сделать, а то сижу, бьюсь над этими скриптами, а все без толку. smile ХЕЛП!!!

Первый - http://www.smv.od.ua/index1.html
Второй - http://www.smv.od.ua/index2.html
А вот, что должно получиться - http://www.smv.od.ua/index3.html

  Вверх
Sardar
Дата 12.3.2005, 14:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Что то я не вникну в проблему, ведь будет голосование, значит на сервере есть скрипты. Тогда почему бы при клике не открыть окно с нужной облицовкой, а контент сгенерит скрипт на сервере, ты передаёшь только ID картинки.

Как открыть окно обсуждалось много раз, в разделе для начинающих есть отдельно тема ОКНА smile


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Palette
Дата 13.3.2005, 06:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Sardar

Привет.

Так задача то, уже другая теперь стоит. Та галерея, о которой задавался вопрос, как оказалось, не подходит по стилю для сайта. Ерунда получается, и в первую очередь потому, что будет не удобна для пользователей. Особенности дизайна таковы. Хотя сама по себе она интересная. Поэтому пришлось от нее отказаться и мудрить другое. А о голосовании уже вообще речь не идет. Я с этими скриптами не могу разобраться, а когда выяснилось, что голосование можно сделать только на ПХП, вообще о нем не заикаюсь, потому что для меня это темный лес.
Я ссылки дала, но вижу, никто туда не ходил, чтоб посмотреть, что требуется. А требуется, сделать из двух скриптов один. И это совершенно другой вариант галереи, абсолютно не похожий на тот, о котором шла речь в начале топика. Может, стоит сделать новый топик с этим вопросом? А то, наверное, ни кто не понимает, что меня интересует конкретно. smile

PM MAIL   Вверх
Joes
Дата 13.3.2005, 13:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Цитата
А то, наверное, ни кто не понимает, что меня интересует конкретно. smile

Это точно... smile
Зашел по ссылкам вообще ничего не понял... Что там получиться должно, а, главное, зачем...
А чем галерея не подошла??? Она и в Африке галерея... Дизайн поменять можно в два счета...
А топик не нужно создавать. Просто объясни доходчиво, что требуется...

Это сообщение отредактировал(а) Joes - 13.3.2005, 13:30
PM MAIL   Вверх
Sardar
Дата 13.3.2005, 13:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Как понять из двух скриптов один? По тем ссылкам что ты дала стоят рабочие скрипты, третий вариант "А вот, что должно получиться" - получился. В чем проблемы? Не можешь поставить сей скрипт у себя?


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Palette
Дата 13.3.2005, 19:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Joes и Sardar

Приветствую smile

Цитата
Дизайн поменять можно в два счета...

Ну, нет, под него все остальное делалось, и только фото галереи нет. А все остальное практически готово, ну, может текст кое-где подкорректировать, и все. И что, я из-за нее буду все ломать? Так я за сто лет сайт не домучаю. smile

Цитата
А чем галерея не подошла???

Легче было бы показать, чем рассказать, но я еще сайт на хост не залила. Просто поверьте мне на слово, это не то, что мне нужно.

Цитата
Она и в Африке галерея...

Это кому как. В данном случае, галерея, не просто набор картинок, а портфолио, поэтому, она и сама по себе должна смотреться солидно, и не выбиваться из стиля всего сайта. Ты пойми, у каждого свой сайт и свои задачи. Если бы все так было просто, ни скрипты, ни дизайн разный, ни кому не были бы нужны. Шуровали бы, по-простому, и как одна мама родила. А хочется иногда проявить творческое начало. Я, например, пока не строю из себя супер пупер дизайнера, или, тем более программиста, мне до этого, как до Киева пешком. И все равно пытаюсь создать что-то эдакое, хоть немного, но свое, хотя и беру за основу готовые решения. Вот поэтому и начались все эти мучения с галереей.

Цитата
По тем ссылкам что ты дала стоят рабочие скрипты, третий вариант "А вот, что должно получиться" - получился. В чем проблемы?

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

Цитата
Как понять из двух скриптов один?

Цитата
Просто объясни доходчиво, что требуется...


Постараюсь, надеюсь, на этот раз получиться. smile

Первый скрипт
Что в нем хорошо - при нажатии на превьюшку, загружается большая картинка, но окно браузера не перезагружается.
Что в нем плохо – превьюшки расположены так, что заполняют всю страницу.

Пользователь при нажатии на превьюшку, расположенную в конце страницы, должен будет скролить все это хозяйство вверх, что бы увидеть ее же большую. Если облегчить ему жизнь, задав превьюшкам автоматический переход наверх, возникает обратная проблема. После просмотра большой картинки, для перехода к следующей превьюшке, ему опять таки придется скролить, но уже вниз страницы. А если галерея большая? Мне бы, например не улыбалось тратить столько времени на эти процедуры.

Второй скрипт
Что в нем хорошо – офигительная экономия места. Решается проблема предыдущего скрипта.
Что в нем плохо – да, в общем-то, ничего, кроме того, что я не могу соединить эти два скрипта в единое целое.

Как должна выглядеть галерея. Маленькие превьюшки, расположены в горизонтальном скроллинге. (функция скрипта № 1) При нажатии на превьюшку, открывается большое изображение, при этом окно браузера не перезагружается. (функция скрипта № 2) Вот и вся задача. Только решить, как?... не представляю…

Ну, что, есть надежда у меня?

PM MAIL   Вверх
Aliance
Дата 13.3.2005, 21:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Поиск.......
http://forum.vingrad.ru/index.php?showtopi...ndpost&p=343615
Добавлено @ 21:56
PS: зашел на первую ссылку:
Код

        <IMG 
      src="file:///C:/Studio%20Master%20Video/МАТЕРИАЛЫ%20ДЛЯ%20САЙТА%20календари%20фото%20и%20др/СКРИПТ%20ГАЛЕРЕИ%20ПРОБА%20РЕДАКТИРОВАНИЯ/СКРИПТЫ%20ПРИМЕРЫ/1/a_00.gif" border=0 
      name=preview>
      <script language=javascript>
function rotate (image_id)
 {
  document.preview.src='file:///C:/Studio%20Master%20Video/МАТЕРИАЛЫ%20ДЛЯ%20САЙТА%20календари%20фото%20и%20др/СКРИПТ%20ГАЛЕРЕИ%20ПРОБА%20РЕДАКТИРОВАНИЯ/СКРИПТЫ%20ПРИМЕРЫ/1/a_'+image_id+'.gif';
 }
        </SCRIPT>

Пути к файлам должны быть не с твоего компьютера, а с и-нета!
У меня, кроме картинок, там ничего нет и ничего нельзя сделать.
PM MAIL WWW ICQ Skype   Вверх
Palette
Дата 13.3.2005, 22:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Aliance

Я уже смотрела эту галерею. Да, хорошая, не спорю. Но я ж уже писала, что меня интересует другой вариант, а по такой, как эта, вопрос закрыт. Ну, не подходит она мне, и ничего уже с этим не поделаешь, так сложилось.
.............................................................
Что надо сделать, не поняла? Ссылки поменять и закачать на сервак картинки? А тогда есть шанс с ней что то сделать, то что меня интересует?

Это сообщение отредактировал(а) Palette - 13.3.2005, 22:11
PM MAIL   Вверх
Aliance
Дата 13.3.2005, 22:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Просто картинки с ТВОЕГО компьютера МЫ видеть не можем smile


Цитата(Palette @ 13.3.2005, 22:08)
не подходит она мне

Если Вы скажите чем, я ее изменю. Нужно НЕ в новом окне открывать, а в самом документе? - пожалуйста. Нужна прокрутка?- пожалуйста.
Только не молчите, «тут нет телепатов» ©

PM MAIL WWW ICQ Skype   Вверх
Palette
Дата 13.3.2005, 22:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Да я как раз не молчу, вроде, а только и делаю, что вопросы задаю. По поводу картинок в скрипте. Я не знала что их не видно, сейчас исправлю.
PM MAIL   Вверх
Aliance
Дата 13.3.2005, 23:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Как именно изменить, т.е. ЧЕМ не подходит? Или тебе нужно ТОЛЬКО с боковыми "стрелочками-прокруткой"?
PM MAIL WWW ICQ Skype   Вверх
Palette
Дата 14.3.2005, 01:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Цитата
Пути к файлам должны быть не с твоего компьютера, а с и-нета!
У меня, кроме картинок, там ничего нет и ничего нельзя сделать.


Исправила. Ну что, теперь все видно, как работает? Люди, так поможет мне кто нить, или перестать уже надеяться?……
PM MAIL   Вверх
Aliance
Дата 14.3.2005, 19:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Во второй странице, внизу напиши
Код

<div style="border: 1px solid red"><IMG src="" id="qwe"></div>


В данной картинки поставь еще высоту и ширину как у твоей картинки...

А дальше в каждой картинке следующее:
Код

<IMG src="1.gif" onclick="change(this.src)">

Таких картинок должно быть сколько тебе нужно + замени у них адрес, естественно.

В head`е напиши такое:
Код

<script>
function change (uri) {
 var pict = document.getElementById("qwe");
 pict.src = uri;
}
</script>


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

Это сообщение отредактировал(а) Aliance - 14.3.2005, 19:15
PM MAIL WWW ICQ Skype   Вверх
Aliance
Дата 14.3.2005, 20:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



PM MAIL WWW ICQ Skype   Вверх
Aliance
Дата 14.3.2005, 21:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Сделал обновление по заказу:
http://lesnych.narod.ru/palette.html (смотрим вторую версию)

Исправлено:
- пред. кеширование больших картинок
- большие и малые картинки

Это сообщение отредактировал(а) Aliance - 14.3.2005, 21:21
PM MAIL WWW ICQ Skype   Вверх
Palette
Дата 14.3.2005, 21:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Уважаемые модераторы! Срочно надо принять меры по поощрению Aliance! smile Помог, несказанно! Умница просто! ОГРОМНОЕ ЕМУ СПАСИБО! Побольше бы таких людей! Форуму тоже мерси, теперь тут пропишусь.
PM MAIL   Вверх
Aliance
Дата 14.3.2005, 21:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Цитата(Palette @ 14.3.2005, 21:14)
Умница просто! ОГРОМНОЕ ЕМУ СПАСИБО!

Спасибо, раз стараться smile

Цитата(Palette @ 14.3.2005, 21:14)
теперь тут пропишусь.

Милости просим smile

PM MAIL WWW ICQ Skype   Вверх
Sardar
Дата 14.3.2005, 21:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Aliance нужно картинки скрывать пока не дозагрузились, я минут 5 с народа ждал пока всё разом появилось.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Palette
Дата 15.3.2005, 00:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Aliance

Есть проблемка.

Мы с тобой как раз это обсуждали. Че то я намутила или что. Вобщем рассказываю.

Есть маленькие картинки, есть большие картинки, которые открываются нажатием на маленькие. А у меня получается, что при нажатии на маленькие, открываются они же, а не большие. То есть просто растягиваются на размер большой картинки, а, по сути, уродуются. При чем, при загрузке страницы, на месте где должна быть большая картинка, она таки появляется, а потом исчезает, как только начинаешь нажимать на маленькие.

Задача такая: нажатием на маленькие картинки, вызывать загрузку больших, а пока что, получается просто увеличение маленьких.
Особенно не приятно это выглядит, если картинка вертикальная.

Может, я что-то не так сделала? Где исправить?

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

PM MAIL   Вверх
Aliance
Дата 15.3.2005, 16:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Palette
Думаю сделала ты все правельно, только есесно, нужно нарисовать большие картинки...сами они растягиваться без потери качеств не будут.
Это легко сделать в фотошопе (изображение -> размер изображения)
PM MAIL WWW ICQ Skype   Вверх
Palette
Дата 15.3.2005, 17:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Aliance

smile А! Поняла, наконец, идею. Значит, изначально должны быть большие картинки. В скроле, они как-то там уменьшаются, а в большом окне показываются, так как положено. С горизонтальными так 100% получится, если большие картинки пропорциональны размеру маленьких. А как быть в отношении вертикальных картинок? Размер маленького окна не будет пропорционален большой картинке. Значит, в маленьком окне вертикальную картинку сплющит. Что в этом случае делать?
PM MAIL   Вверх
Aliance
Дата 15.3.2005, 17:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Нет. У тебя есть, скажем маленькие. Ты в фотошопе делаешь их большими. и все. это все разные картинки! ВЕсят они по-разному. Там нигде их пропорции не меняются.
PM MAIL WWW ICQ Skype   Вверх
Palette
Дата 15.3.2005, 17:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Это правильный код?

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Галерея с прокруткой</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
</HEAD>
<BODY>
<center>
<script type="text/javascript">

function change (uri) {
 var pict = document.getElementById("qwe");
 pict.src = uri;
}


var goleftimage='left-arrow.gif'
var gorightimage='right-arrow.gif'

var menuwidth = 430;

var menuheight = 250;

/*
reverse - обратный порядок прокрутки
normal - прямой порядок прокрутки
*/
var scrolldir = "reverse";

var scrollspeed = 6;

var menucontents='<nobr><a href="#"><img src="stihi.jpg" border=1 width="120" height="60" onclick="change(this.src)"></a>  <a href="#"><img src="faq.jpg" border=1 width="120" height="60" onclick="change(this.src)"></a> <a href="#"><img src="story.jpg" border=1 width="120" height="60" onclick="change(this.src)"></a> <a href="#"><img src="guestbook2.jpg" border=1 width="120" height="60" onclick="change(this.src)"></a> <a href="#"><img src="tic-tac2.jpg" border=1 width="120" height="60" onclick="change(this.src)"></a></nobr>';

var iedom = document.all || document.getElementById;
var leftdircode = 'onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"';
var rightdircode = 'onMouseover="moveright()" onMouseout="clearTimeout(righttime)"';
if (scrolldir == "reverse"){
 var tempswap = leftdircode;
  leftdircode = rightdircode;
  rightdircode = tempswap;
}
if (iedom)
document.write('<span id="temp" style="visibility:hidden; position:absolute; top:-100; left:-5000">'+menucontents+'</span>');
var actualwidth = '';
var cross_scroll, ns_scroll;
var loadedyes = 0;

function fillup() {
if (iedom) {
 cross_scroll = document.getElementById ? document.getElementById("test2") : document.all.test2;
 cross_scroll.innerHTML = menucontents;
 actualwidth = document.all ? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth;
}
else if (document.layers) {
 ns_scroll = document.ns_scrollmenu.document.ns_scrollmenu2;
 ns_scroll.document.write(menucontents);
 ns_scroll.document.close();
 actualwidth = ns_scroll.document.width;
}
 loadedyes = 1
}
window.onload = fillup

function moveleft() {
if (loadedyes) {
 if (iedom && parseInt(cross_scroll.style.left) > (menuwidth-actualwidth)) {
   cross_scroll.style.left = parseInt(cross_scroll.style.left) - scrollspeed+"px";
 } else if (document.layers&&ns_scroll.left > (menuwidth-actualwidth))
   ns_scroll.left -= scrollspeed;
 }
 lefttime = setTimeout("moveleft()",50);
}

function moveright(){
if (loadedyes){
 if (iedom && parseInt(cross_scroll.style.left) < 0) {
   cross_scroll.style.left = parseInt(cross_scroll.style.left) + scrollspeed+"px";
 } else if (document.layers&&ns_scroll.left < 0)
   ns_scroll.left += scrollspeed;
 }
 righttime = setTimeout("moveright()",50);
}


if (iedom || document.layers) {
 with (document) {
  write('<table border="0" cellspacing="0" cellpadding="9">');
  write('<td valign="middle"><a href="#" '+leftdircode+'><img src="'+goleftimage+'"border=0></a> </td>');
  write('<td width="'+menuwidth+'px" valign="top">');
  if (iedom){
  write('<div style="position:relative;width:'+menuwidth+'px;height:'+menuheight+'px;overflow:hidden;">');
  write('<div id="test2" style="position:absolute;left:0;top:70">');
  write('</div></div>');
} else if (document.layers) {
 write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">');
 write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>');
}
write('</td>')
write('<td valign="middle"> <a href="#" '+rightdircode+'>')
write('<img src="'+gorightimage+'"border=0></a>')
write('</td></table>')
}
}

</SCRIPT>

<h3>Предпросмотр картинки:</h3>
<IMG src="prize.jpg" id="qwe" width="120" height="60" align="center">


<hr color="dodgerblue" width="80%">
<br>© <a href="http://aliance.hoha.ru/?section=feedback">Лесных Илья</a> [<a href="http://aliance.hoha.ru">http://aliance.hoha.ru</a>]

</center>
</BODY>
</HTML>


Где должны стоять ссылки на большие, а где на маленькие картинки?
Это ссылка на большую, она загружается первой, правильно?

Код

<IMG src="prize.jpg" id="qwe" width="120" height="60" align="center">


А этот код для маленьких, я правильно понимаю?

Код

var menucontents='<nobr><a href="#"><img src="stihi.jpg" border=1 width="120" height="60" onclick="change(this.src)"></a>  <a href="#"><img src="faq.jpg" border=1 width="120" height="60" onclick="change(this.src)"></a> <a href="#"><img src="story.jpg" border=1 width="120" height="60" onclick="change(this.src)"></a> <a href="#"><img src="guestbook2.jpg" border=1 width="120" height="60" onclick="change(this.src)"></a> <a href="#"><img src="tic-tac2.jpg" border=1 width="120" height="60" onclick="change(this.src)"></a></nobr>';


А для больших тогда где?
PM MAIL   Вверх
Aliance
Дата 15.3.2005, 18:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Нет, ну я же дал тебе новый код...
http://lesnych.narod.ru/pallete2/scrollgal.htm
PM MAIL WWW ICQ Skype   Вверх
Palette
Дата 15.3.2005, 18:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



О, блин, видишь, твоя моя не понимай. Я дважды скачала один и тот же скрипт, и еще сижу и удивляюсь, вроде одинаковые, и комментариев нет, о которых ты говорил. Я дико сори, моя вина, не внимательная я оказалась. Пойду разбираться, ГРАН, ГРАН МЕРСИ!
PM MAIL   Вверх
Palette
Дата 15.3.2005, 20:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Еще раз хочу сказать спасибо Aliance. Очередной раз запуталась, хотя все доходчиво объяснили, но меня, к счастью, направили на путь истинный.
PM MAIL   Вверх
Aliance
Дата 15.3.2005, 22:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Цитата(Palette @ 15.3.2005, 20:06)
Еще раз хочу сказать спасибо Aliance. Очередной раз запуталась, хотя все доходчиво объяснили

Завсегда smile

Цитата(Palette @ 15.3.2005, 20:06)
но меня, к счастью, направили на путь истинный.

Не поделишься? smile

PM MAIL WWW ICQ Skype   Вверх
Palette
Дата 16.3.2005, 18:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Aliance

Само собой, это в обязательном порядке. Только я хочу показать, как это будет выглядеть во всей красе, то есть уже с фотками. Кстати, скрипт немножко переделала, но, по мелочи. Расстояние между большой фоткой и скроллингом, все таки, уменьшила, а то сильно большое было. И поменяла скрол и фотку местами. Обязуюсь через пару дней выложить ссылку, как только залью галерею на сервак.

Пока экспериментировала со скриптом, неожиданно выявилась маленькая проблемка. При нажатии на маленькие картинки, происходит резкое перемещение вверх страницы. Как это действие можно запретить?

PM MAIL   Вверх
Aliance
Дата 16.3.2005, 21:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Palette

Там где пустая картинки, тег <IMG> нужно задать src="" и высоту и ширину, как у больших картинок...
PM MAIL WWW ICQ Skype   Вверх
Страницы: (3) [Все] 1 2 3 
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1775 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.