Перейти к содержанию
Официальный форум поддержки Simpla

Рекомендуемые сообщения

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

 

post-18362-0-86975500-1428444984_thumb.jpg

 

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 - Экстра-большой

 


 

Ссылка на сообщение
Поделиться на другие сайты

отлично. 

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


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

Изменено пользователем osben
Ссылка на сообщение
Поделиться на другие сайты

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

 

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

 

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

 

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

вставил

 

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

 


 

Ссылка на сообщение
Поделиться на другие сайты

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

 

Приступим:

 

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;}

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

post-18362-0-63426100-1428699227_thumb.jpg

Изменено пользователем xilt
Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

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

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...