Фотогалерея на php и javascript

@dion_86 · Регистрация: 27.11.2011

Студворк — интернет-сервис помощи студентам

Вот есть такой код php вперемешку с javascript

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$path = $_SERVER['DOCUMENT_ROOT'] . './slaid_show/images/miniature_images/';
$res = scandir($path);
 
echo "<script type='text/javascript'>  var img_block = document.getElementById('img_block');";
    foreach ($res as $element_miniature){
 
        list($min,$elem) = explode("min_", $element_miniature);
 
        if($element_miniature == "." || $element_miniature == "..") continue;    
           $miniature_img[] = $elem;
            echo    " img_block.innerHTML += \"<img src=\'./images/miniature_images/min_"
                    . $elem  .
                    "' onclick = 'show_original_image()'>\";";  
    }
 
echo "</script> ";

и сама функция show_original_image()

PHP
1
2
3
4
5
6
7
8
9
10
11
echo "
       <script type='text/javascript'>  
            function show_original_image() {
         
                   var show_images = document.getElementById('show_images');
                 
                   show_images.innerHTML = \"<img src=\'./images/(вот здесь должен быть адрес картинки = $elem)' style = 'width:600px; height:auto;'>\" ;
               }
             
       </script>
   ";

эта функция должна вывести мне в блок с id="show_images" оригинал изображения такой же как и его миниатюра.
Пытался передать параметры в функцию ничего не получилось. Как реализовать вывод изображения пока точно не знаю.
Заранее спасибо...

Добавлено через 23 минуты
Или все таки стоит преобразовывать все изображения в формат jpg и вытаскивать их из папки используя javascript а не php.

@fol · 30.12.2013, 03:30

Я бы так сделал (без php - а зачем он?):

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="big_block" onclick="bigg">                                     
                <div id="left">
                    <div id="back" onclick="img_back()"> &lt; </div>
                </div>
                                                                                    
                <div id="center">
                    <div id="block_img" style="display:none">
                        <img id="img_big" src="" width="640" onclick="img_next()">
                    </div>  
                </div>
                                            
                <div id="right">
                    <div id="next" onclick="img_next()">&gt;</div>  
                </div>
                <div id="close" onclick="img_close()">X</div>
            </div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var a;
 
function img_open(img)
    {
        document.getElementById("big_block").style.display="block";
        document.getElementById("block_img").style.display="block";
        document.getElementById("img_big").src="img/"+img+".jpg";
        a=img;
    }
function img_close()
    {
    document.getElementById("big_block").style.display="none";
    }
    
function img_next()
    {
        a++;
        if(a==11)
            {
            a=1;
            }
        
            document.getElementById("img_big").src="img/"+a+".jpg";
            
    }
function img_back()
    {
        a--;
        if(a==0)
            {
            a=10;
            }
            document.getElementById("img_big").src="img/"+a+".jpg";
        
    }

@dion_86 · 30.12.2013, 04:29 **[ТС]**

Думаю что все таки преобразую все картинки в формат jpg и с помощью javascript сделаю анимационное слайд шоу.
Для этого мне нужен массив, поэтому я использовал php. Буду преобразовывать в jpg при заливке изображений в папку с оригиналами а потом копировать в отдельную папку миниатюры. Миниатюры будут тоже перемещаться в анимации. При клике на миниатюру будет меняться оригинал в центре окна.

@sashok991 · 30.12.2013, 09:27

Лучше скачать бесплатную готовую галерею, например fotorama или еще какую нибудь.

@dion_86 · 30.12.2013, 16:30 **[ТС]**

Ну тогда не будешь знать как писать такую фотогалерею.

@fic · 30.12.2013, 17:27

Я делаю так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function showImg()
    {
        var images = getElementsByClass('good_photo', document);
 
        for(var i = 0; i < images.length; ++i)
        {
            images[i].onclick = function()
            {
                var old = this.getAttribute('data-old');
                if(old == null)
                {
                    var src = this.getAttribute('src');
                    this.setAttribute('data-old', src);
                    this.setAttribute('src', src+'&max=true');
                    this.style.position = 'absolute';
                    this.style.zIndex = 2;
                    this.style.left = '0px';
                    this.style.border = '3px solid gray';
                }
                else
                {
                    var src = old;
                    this.removeAttribute('data-old');
                    this.setAttribute('src', src);
                    this.style.position = 'relative';
                    this.style.zIndex = 1;
                    this.style.border = 'none';
                }
            }
        }
    }

Просто добавляю рамочку и &max=true к ссылке. А по ссылке находится скрипт который и выдает картинку в зависимости от параметров

@dion_86 · 30.12.2013, 19:50 **[ТС]**

Вопрос на предыдущие посты решил вот этот код:

PHP
1
2
3
echo  "  var img = [];
           img =".json_encode($miniature_img)."
        ";

я вывел массив img в отдельный javascript файл и теперь что хочу то и буду в этом js файле делать.
Мне нужны были имена картинок для использования их в качестве адресов - я их и получил.

Добавлено через 1 минуту
fic интересный код спасибо.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@dion_86 10 / 10 / 2 Регистрация: 27.11.2011 Сообщений: 251
	30.12.2013, 04:29 [ТС]
	Думаю что все таки преобразую все картинки в формат jpg и с помощью javascript сделаю анимационное слайд шоу. Для этого мне нужен массив, поэтому я использовал php. Буду преобразовывать в jpg при заливке изображений в папку с оригиналами а потом копировать в отдельную папку миниатюры. Миниатюры будут тоже перемещаться в анимации. При клике на миниатюру будет меняться оригинал в центре окна. 0

@sashok991 21 / 21 / 5 Регистрация: 26.12.2013 Сообщений: 177
	30.12.2013, 09:27
	Лучше скачать бесплатную готовую галерею, например fotorama или еще какую нибудь. 0

@dion_86 10 / 10 / 2 Регистрация: 27.11.2011 Сообщений: 251
	30.12.2013, 16:30 [ТС]
	Ну тогда не будешь знать как писать такую фотогалерею. 0