VPF::Работа с картинкой - Форум программистов

Enya

Дата 31.1.2006, 12:56 (ссылка)

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

Загрузка ...

Опытный

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

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

Здравсвуйте!
Суть задачи:
Есть четыре картинки (picture1.jpg, picture2.jpg, picture3.jpg, picture4.jpg).
На главной страничке в одной из ячеек должна отображаться picture1.jpg с размерами 110х110
На картинку можно кликнуть и тогда картинка откроеться в новом окошке с реальными размерами картинки, но окошко не должно быть на весь экран, не много больше чем реальные размеры картинки.
И в открывшемся окошке, внизу должны быть циферки (1 2 3 4), кликнув на которые, можно было увидеть в реальных рамерах (picture1.jpg, picture2.jpg, picture3.jpg, picture4.jpg). Я думаю с таким многие из вас встречались в интернете.

Дело в том, что я даже не знаю, как подступиться к решению задачи?! smile

З.Ы. Если создавать миниатюру струдно, сложно и новичок не поймёт, то я сам могу сделать например (smallpicture1.jpg, smallpicture2.jpg, smallpicture3.jpg, smallpicture4.jpg).
Но вот открытие нового окошка, с мини-навигацией для переключения на следующие картинки smile

Это сообщение отредактировал(а) 12345c - 1.2.2006, 17:51

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

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

PARROT

Дата 31.1.2006, 13:23 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

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

Почти половину из задачи придется делать в яваскрипт:
Новое окно, наведение на цифры, изменение на другую картинку.
А узнать размер картинки в рнр.

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

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Mal Hack

Дата 31.1.2006, 14:33 (ссылка)

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

Загрузка ...

Мудрый...

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

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

Что касается создания миниатюры, то это сюда: http://forum.vingrad.ru/index.php?showtopic=62052
Остальное в JS.

Enya

Дата 31.1.2006, 15:19 (ссылка)

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

Загрузка ...

Опытный

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

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

Спасибо, что перенесли тему.
Надеюсь, что здесь помогут.

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

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

o.s.a.

Дата 31.1.2006, 19:31 (ссылка)

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

Загрузка ...

Xo4y B MocKBy

Профиль
Группа: Участник
Сообщений: 312
Регистрация: 16.2.2005
Где: Ташкент

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

Enya
Начинай, мы подхватим.

Цитата(Enya @ 31.1.2006, 14:56

)

На главной страничке в одной из ячеек должна отображаться picture1.jpg с размерами 110х110

Это в принципе понятно.

Цитата(Enya @ 31.1.2006, 14:56

)

На картинку можно кликнуть и тогда картинка откроеться в новом окошке

Код


window.open();

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

Не могу стоять, пока другие работают, пойду полежу.

Innuendo

Дата 31.1.2006, 19:45 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

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

да, можно по идее просто в window.open написать адрес типа tvoysait.ru/picture1.jpg
а менять из через location.href

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

Ciber SLasH

Дата 31.1.2006, 20:06 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

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

Вот здесь я бился как рыба об лёд над этой проблемой: http://forum.vingrad.ru/index.php?showtopi...p;hl=openwindow
посмотри что из этого вышло...

Enya

Дата 1.2.2006, 00:20 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(o.s.a. @ 31.1.2006, 19:31

)

Начинай, мы подхватим.

Так вот, как говорят модераторы: "Поиск рулит!!" В этом я никогда не сомневалась.
Вот код перебора картинок:

Код


<html>
<head>
<title>Listing 24.1. Cycling Through a Series of Images</title>

<script language="JavaScript" type="text/javascript">
<!--

var image_array = new Array()

// Add the image filenames to the array
image_array[0] = "digital0.gif"
image_array[1] = "digita11.gif"
image_array[2] = "digita12.gif"
image_array[3] = "digita13.gif"
image_array[4] = "digita14.gif"
image_array[5] = "digita15.gif"
image_array[6] = "digita16.gif"
image_array[7] = "digita17.gif"
image_array[8] = "digita18.gif"
image_array[9] = "digita19.gif"

var image_index = 0

function next_image()
{
    // Increment the array index
    image_index++
    
    // Are we past the last item?
    if (image_index == image_array.length) {
    
        // If so, set it to 0 to start over at the beginning
        image_index = 0
    }
    
    // Display the new image
    document.images["image_holder"].src = image_array[image_index]
    
}

function previous_image() {

//alert(image_holder.src)
    // Decrement the array index
    image_index--
    
    // Is the index negative?
    if (image_index < 0) {
    
        // If so, set it to the last element in the array
        image_index = image_array.length - 1
    }
    
    // Display the new image
    document.images["image_holder"].src = image_array[image_index]
}

//-->
</script>

</head>

<body>

<center>

<img src="digita10.gif" name="image_holder">
<br>
<a href="javascript:previous_image()">

Previous
</a>
&nbsp;
<a href="javascript:next_image()">
Next
</a>

</center>

</body>
</html>

Для проверки кода, вам понадобяться картинки. Если есть есть желание, могу дать сылку на ресурс вот. В книге было написанно, что найдёте код в интернете.
Код есть. Но это не конец!!
Нужно сделать так, чтобы при клике на мини-картинку товара открывалась окошко, в котором работал приведённый код.
З.Ы. Главу по созданию и управлению окнами браузера я уже читаю.

Вот что меня ещё беспокоит:
у меня несколько десятков товаров и у каждого по 4-5 картики, мне что код перебора для каждого писать? smile

Ну вот в файле .js я указываю

Код


image_array[0] = "digital0.gif"
image_array[1] = "digita11.gif"
image_array[2] = "digita12.gif"
image_array[3] = "digita13.gif"
image_array[4] = "digita14.gif"
image_array[5] = "digita15.gif"
image_array[6] = "digita16.gif"
image_array[7] = "digita17.gif"
image_array[8] = "digita18.gif"
image_array[9] = "digita19.gif"

Ну, тут для примера 10 элементов массива. И для одного товара.
А как организовать для остальных?! smile

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

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

PARROT

Дата 1.2.2006, 10:12 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

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

Дописать:

Код


image_array[10] = "digital20.gif"
image_array[11] = "digita21.gif"

и т.д.
Добавлено @ 10:26

Цитата(Enya @ 1.2.2006, 00:20)

Вот что меня ещё беспокоит:
у меня несколько десятков товаров и у каждого по 4-5 картики, мне что код перебора для каждого писать?

Нет, нужно воспользоваться возможностями РНР, занести пути к картинкам в базу, а потом с помощью яваскрипта генерировать так как хочется.

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

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Штык

Дата 1.2.2006, 12:23 (ссылка)

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

Загрузка ...

Бывалый

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

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

Цитата

занести пути к картинкам в базу,

зачем в базу если можно сразу формировать в таком виде:

Код


image_array[0] = "digital0.gif"
image_array[1] = "digita11.gif"
image_array[2] = "digita12.gif"
image_array[3] = "digita13.gif"

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

Lachetes familieresQui nous rendent guerrieres

Enya

Дата 1.2.2006, 15:03 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата

Модератор: удалено неграмотно составленное предложение. Автор, заботьтесь о внимании читателей! Оно Вам ещё пригодится.

Спасибо. Учту.

Цитата(PARROT @ 1.2.2006, 10:12

)

Это как? php+Javascropt Можно хоть на пальцах на бросать аглоритм?!
Штык
ТО есть ты предлогаешь в одном файле закидать

Код


// Add the image filenames to the array
image_array[0] = "digital0.gif"
image_array[1] = "digita11.gif"
image_array[2] = "digita12.gif"
image_array[3] = "digita13.gif"
image_array[4] = "digita14.gif"
image_array[5] = "digita15.gif"
image_array[6] = "digita16.gif"
image_array[7] = "digita17.gif"
image_array[8] = "digita18.gif"
image_array[9] = "digita19.gif"
.....
//И так далее. Заюить все картинки?

На загруску это не повлияет?

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

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

PARROT

Дата 1.2.2006, 15:26 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

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

по типу как я тут делала: http://www.pkspo.spb.ru/index.php?page=process

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

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Innuendo

Дата 1.2.2006, 17:24 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

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

я вот сделал щас на быструю руку.. Думаю сойдет.
Только квадратных картинок у меня не было... то есть твой размер 110*110 искажал мои картинки.. Я взял 138*110. Ну насчёт размеров ты там сам уже подредактируешь

index.html:

Код


<HTML>
<HEAD>
<script type="text/javascript">
<!--
// Loading of pictures --- Start   --- //
var MyPicts= new Array();
MyPicts[0]= new Image()
MyPicts[1]= new Image()
MyPicts[2]= new Image()
MyPicts[3]= new Image()
MyPicts[4]= new Image()
MyPicts[0].src= "1.jpg"
MyPicts[1].src= "2.jpg"
MyPicts[2].src= "3.jpg"
MyPicts[3].src= "4.jpg"
MyPicts[4].src= "5.jpg"
// Pictures Secition END ---- //

//Function of opening new Window for pictures
function open_w(name, url, toolbar, menubar, statusbar, scrollbar, resizable)
{
var width=800; // Задайте ширину как у картинки которая должна быть 
var height=640; //А высоту больше на 40-45 пикселей для той "менюшки перехода"
if (document.all) height=645 // У  IE так будет красивее
   //Центруем окно
   var left = parseInt((screen.availWidth/2) - (width/2));
   var top = parseInt((screen.availHeight/2) - (height/2));
   //Задаём параметры окна
  toolbar_str = toolbar ? 'yes' : 'no';
  menubar_str = menubar ? 'yes' : 'no';
  statusbar_str = statusbar ? 'yes' : 'no';
  scrollbar_str = scrollbar ? 'yes' : 'no';
  resizable_str = resizable ? 'yes' : 'no';
  //Открываем Окно
  
  mypicture = window.open(url, name, 'left='+left+',top='+top+',width='+width+',height='+height+',toolbar='+toolbar_str+',menubar='+menubar_str+',status='+statusbar_str+',scrollbars='+scrollbar_str+',resizable='+resizable_str);
}

function doIt(){  // Opening Pictures in new Window
open_w('mypicture', 'pict.html', 0, 0, 0, 0, 1); mypicture.focus();
}
//-->
</script>
</HEAD>
<BODY>
<img src="1.jpg" id="miniImg" width='138' height= '110' onclick="doIt()" style="cursor:pointer">
</BODY>
</HTML>

pict.html:

Код


<HTML>
<HEAD>
<STYLE>
table {
                                cursor:pointer; 
                                text-align: center; 
                                border: 1px solid #DFE6EF; 
                                background-color:#FFFFFF;
                            }
                            </style>
<script type="text/javascript">
<!--
// Loading of pictures --- Start   --- //
var MyPicts= new Array();
MyPicts[0]= new Image()
MyPicts[1]= new Image()
MyPicts[2]= new Image()
MyPicts[3]= new Image()
MyPicts[4]= new Image()
MyPicts[0].src= "1.jpg"
MyPicts[1].src= "2.jpg"
MyPicts[2].src= "3.jpg"
MyPicts[3].src= "4.jpg"
MyPicts[4].src= "5.jpg"
// Pictures Secition END ---- //

function putImg(x){
document.getElementById("bigimg").src = MyPicts[x-1].src
opener.document.getElementById("miniImg").src= MyPicts[x-1].src
for (var i=1; i<=5; i++){
document.getElementById(i).style.backgroundColor='#DFE6EF'
}
document.getElementById(x).style.backgroundColor='lightgreen'
}
//-->
</script>
</HEAD>
<BODY onload="putImg(1)" onunload="putImg(1)">
<img id="bigimg" width='800' height='600'>
<table align="center"> 
<tr>
<td id='1' onclick="putImg(this.id)" style="background-color:#DFE6EF;">1</td>
<td id='2' onclick="putImg(this.id)" style="background-color:#DFE6EF;">2</td>
<td id='3' onclick="putImg(this.id)" style="background-color:#DFE6EF;">3</td>
<td id='4' onclick="putImg(this.id)" style="background-color:#DFE6EF;">4</td>
<td id='5' onclick="putImg(this.id)" style="background-color:#DFE6EF;">5</td>
</tr>
</table>
</BodY>
</htmL>

Проверил на FireFox 1.5, IE 6.0- работает. Только вот этот Block Pop-UP в IE всё не получается отключить...
щас захостю- покажу как это выглядит.
Добавлено @ 17:31
http://immortal.com.md/tests/

там правда баннерок вылазит даже на всплывающих окнах... Но вы по крестику его закройте и всё smile

Это сообщение отредактировал(а) Innuendo - 1.2.2006, 17:31

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

Enya

Дата 1.2.2006, 19:42 (ссылка)

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

Загрузка ...

Опытный

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

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

Innuendo, дейтвительно то что я и хотела. Прямо в десяточку. Можно только несколько вопросов?
1. У меня с интернетом достаточно не плохо, но вот http://immortal.com.md/tests/ грузился долгова-то почему? smile

2. И потом. Вот http://immortal.com.md/tests/ одна картинка по кторой кликаешь и появляеться новое окошко ... а если у меня на одной странице 5-10 таких картинок?
Мне для каждой картинки делать .js фаил?

Ну, а вообще здорово. smile

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

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

Innuendo

Дата 1.2.2006, 21:19 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

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

Цитата

Мне для каждой картинки делать .js фаил?

можно. Только сначала надо докончить до такого как тебе надо.

Цитата

а если у меня на одной странице 5-10 таких картинок?

Просто ты в первом посте написала, что у тебя там 1 картинка.
Опиши точнее, что надо доделать. То есть ты хочешь чтоб все 5 картинок были на 1 страничке маленькими?

а про com.md
не знаю... у меня почти как на локалке- моментально.

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

12345c

Дата 2.2.2006, 14:47 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

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

Цитата(Innuendo @ 1.2.2006, 21:19

)

Просто ты в первом посте написала, что ...

первый пост написал другой человек: ;)

Цитата(Enya @ 31.1.2006, 12:56

)

З.Ы. Если создавать миниатюру струдно, сложно и новичок не поймёт, то я сам могу сделать ...

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

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

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