Перейти к содержимому


Фото
- - - - -

Выбор размера изображения при автоматическом подборе

автоподбор картинок размер изображений

  • Чтобы отвечать, сперва войдите на форум
6 ответов в теме

#1 xilt

xilt
  • Фрилансер
  • 33 сообщений
  • Программирование
  • Версия CMS:2.x

Опубликовано 08.04.2015 - 01:21

Простое решение для выбора размера при автоматическом подборе картинок, увы точный размер задать нельзя (кто знает как сообщите), но не суть, может кому пригодится :)

 

Прикрепленный файл  2.jpg   24,34К   27 раз скачано

 

1. В файле сайт\simpla\ajax\get_images.php

Добавляем после:

$keyword = $_GET['keyword'];

это

$imgsz = $_GET['imgsz'];

и меняем

$url = 'http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q='.urlencode($keyword).'&start='.$start.'&rsz=8';

на это

$url = 'http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q='.urlencode($keyword).'&start='.$start.'&rsz=8&imgsz='.$imgsz;


2. В файле сайт\simpla\design\html\product.tpl

 

Перед

// Волшебные изображения
...

вставляем

//Выбор размера изображения
    swit = '';
    $("#switcher .button").bind('click', function(){
        swit = $(this).attr("swit");
        $("#switcher .button").removeClass('selected');
        $(this).addClass('selected');
        swit = swit;
        $('#images_wizard').trigger('click');
    })

добавим стили в css или <style>...</style>

#switcher .button{border: 1px solid #D0D0D0;width: 100px;height: 18px;margin-right: 3px;margin-bottom: 7px;background-color: #FFF;display: inline-block;word-spacing: normal;vertical-align: middle;text-align: center;cursor: pointer;}

#switcher .selected{color: #FFF;background: linear-gradient(to bottom, #A6D941 0px, #7EB225 50%, #508504 100%) repeat scroll 0% 0% transparent;}

в блоке <!-- Изображения товара -->    после

<h2>Изображения товара
<a href="#" id=images_wizard><img src="design/images/wand.png" alt="Подобрать автоматически" title="Подобрать автоматически"/></a>
</h2>

Вставляем

<div id="switcher">
    <div class="button selected" swit="">Любые</div>
    <div class="button" swit="large">Средние</div>
    <div class="button" swit="xlarge">Большие</div>
    <div class="button" swit="xxlarge">Еще больше</div>
</div>

Все.

 

Значение swit="..." можно менять на любое нужное, согластно google api, есть такие размеры:

  •     icon - Иконки
  •     small - Маленький
  •     medium - Средний
  •     large - Большой
  •     xlarge - Еще больше
  •     xxlarge - Очень большой
  •     huge - Экстра-большой

 


 



#2 xavior

xavior
  • Фрилансер
  • 290 сообщений
  • Дизайн, Программирование, Верстка, Заказчик
  • Версия CMS:1.x, 2.x
  • Откуда:Bombay

Опубликовано 08.04.2015 - 04:21

Шикарно!  :)



#3 osben

osben
  • Фрилансер
  • 802 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:UA, RU

Опубликовано 08.04.2015 - 08:52

отлично. 

вот не пойму ток вот етой опечатки 


//Выбор размера изображения
swit = '';
$("#switcher .button").bind('click', function(){
swit = $(this).attr("swit");
$("#switcher .button").removeClass('selected');
$(this).addClass('selected');
swit = swit;
$('#images_wizard').trigger('click');
})


Изменено: osben, 08.04.2015 - 08:53


#4 Kors

Kors
  • Фрилансер
  • 3 522 сообщений
  • Программирование
  • Версия CMS:1.x, 2.x
  • Откуда:Россия

Опубликовано 08.04.2015 - 10:05

Задумка очень хорошая!

 

Но это не работает. И вообще непонятно, как может работать  $imgsz = $_GET['imgsz'] , если параметр imgsz  нигде не передается.

 

У меня заработало правильно, когда  файле simpla/design/html/product.tpl  вместо

 

                  data: {keyword: key, start: images_loaded},

вставил

 

                  data: {keyword: key, start: images_loaded, imgsz: swit},

 


 



#5 xilt

xilt
  • Фрилансер
  • 33 сообщений
  • Программирование
  • Версия CMS:2.x

Опубликовано 08.04.2015 - 10:10

Действительно, забыл написать  :wacko: . Каюсь )



#6 xilt

xilt
  • Фрилансер
  • 33 сообщений
  • Программирование
  • Версия CMS:2.x

Опубликовано 10.04.2015 - 23:58

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

 

Приступим:

 

1. В файле сайт\simpla\ajax\get_images.php

 

меняем это:

$images = array();
if($data)
        foreach ($data->responseData->results as $result)
                $images[] = urldecode(str_replace('%2520', '%20', $result->url));

header("Content-type: application/json; charset=UTF-8");
header("Cache-Control: must-revalidate");
header("Pragma: no-cache");
header("Expires: -1");                

print(json_encode($images));

меняем на:

$res = new stdClass;
if($data)
foreach ($data->responseData->results as $result)
{
    $images[] = urldecode(str_replace('%2520', '%20', $result->url));
    $size[] = urldecode($result->width.'x'.$result->height);
}

$res->images = $images;
$res->size = $size;

header("Content-type: application/json; charset=UTF-8");
header("Cache-Control: must-revalidate");
header("Pragma: no-cache");
header("Expires: -1");                

print(json_encode($res));

 

2. в файле сайт\simpla\design\html\product.tpl

 

меняем в скрипте // Волшебные изображения, примерно 289 строка это 

for(i=0; i<Math.min(data.length, images_num); i++)
                    {
                        image_url = data[i];
                        $("<li class=wizard><a href='' class='delete'><img src='design/images/cross-circle-frame.png'></a><a href='"+image_url+"' target=_blank><img onerror='$(this).closest(\"li\").remove();' src='"+image_url+"' /><input name=images_urls[] type=hidden value='"+image_url+"'></a></li>").appendTo('div .images ul');
                    }

 

меняем на:

for(i=0; i<Math.min(data.images.length, images_num); i++)
                    {
                        image_url = data.images[i];
                        image_size = data.size[i];
                        $("<li class=wizard><a href='' class='delete'><img src='design/images/cross-circle-frame.png'></a><a href='"+image_url+"' target=_blank><img onerror='$(this).closest(\"li\").remove();' src='"+image_url+"' /><input name=images_urls[] type=hidden value='"+image_url+"'><div class='size'><div class='siz'>"+image_size+"</div></div></a></li>").appendTo('div .images ul');
                    }

и последнее добавим стили в css или <style>...</style>

.size{display: block;width: 100px;position: absolute;}
.siz{display: block;margin-top: -16px;box-sizing: border-box;-webkit-box-sizing: border-box;color: #fff;font: normal 11px arial,sans-serif;width: 100%;white-space: nowrap;background: rgba(51,51,51,0.8);margin-left: 0;padding: 2px 4px;}

должно получиться так:

Прикрепленный файл  WxH.jpg   29,51К   17 раз скачано


Изменено: xilt, 11.04.2015 - 00:31


#7 Kors

Kors
  • Фрилансер
  • 3 522 сообщений
  • Программирование
  • Версия CMS:1.x, 2.x
  • Откуда:Россия

Опубликовано 11.04.2015 - 09:39

Очень хорошо!

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





Также с меткой «автоподбор картинок, размер изображений»

0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых