За последние 24 часа нас посетили 18968 программистов и 1564 робота. Сейчас ищут 1623 программиста ...

Ползунок для нескольких изображений

Тема в разделе "JavaScript и AJAX", создана пользователем helen92, 2 дек 2015.

  1. helen92

    helen92 Новичок

    С нами с:
    26 ноя 2015
    Сообщения:
    3
    Симпатии:
    0
    Добрый вечер, подскажите пожалуйста как сделать ползунок для увеличения размера одновременно нескольких фоторгафий(как раньше при редактировании аватара в вк).
    Использовала $("#slider").slider(), но тогда увеличение срабатывает на все изображения, делая их одинаковыми по размеру, а требуется сохранить пропорцию.
     
  2. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Переписать slider или поискать другой плагин. И почему ты по id находишь фото? Он должен быть уникальным. Делай через класс.
     
  3. helen92

    helen92 Новичок

    С нами с:
    26 ноя 2015
    Сообщения:
    3
    Симпатии:
    0
    это айди самого бегунка, не совсем пойму просто как обратиться к этому бегунку так, чтобы он менял параметры, т.к. у него задаются min и max, под которые и подгоняются картинки. Пока найти что-то другое не получилось, вот поэтому и прошу натолкнуть на мысли.

    Добавлено спустя 3 минуты 39 секунд:
    вот сам код, может так понятнее будет о чем я прошу)
    Код (PHP):
    1. $(function() {
    2.     var width = $("#images img").attr("width");
    3.     var height = $("#images img").attr("height");
    4. var width1 = $("#images1 img").attr("width");
    5. var height1 = $("#images1 img").attr("height");
    6.     var width2 = $("#images2 img").attr("width");
    7.     var height2 = $("#images2 img").attr("height");
    8. = width/height;
    9. z1 = width1/height1;
    10. z2 = width2/height2;
    11.     var width3 = $("#images3 img").attr("width");
    12.     var height3 = $("#images3 img").attr("height");
    13. z3 = width3/height3;
    14.         $("#slider").slider({
    15.             orientation: "horizontal",//horizontal
    16.             min: 131,
    17.             max: 666,
    18.             slide: function(event, ui) {
    19.             y = Math.round(ui.value/z);
    20.             y1 = Math.round(ui.value/z);
    21. y2 = Math.round(ui.value/z);
    22. y3 = Math.round(ui.value/z);
    23.                 $("#amount").val(ui.value);
    24.                 $("#amount").val(y);
    25.                 $('#images img').width(ui.value);
    26.                 $('#images img').height(y);
    27. $('#images1 img').width(ui.value);
    28. $('#images1 img').height(y1);
    29.                 $('#images2 img').width(ui.value);
    30.                 $('#images2 img').height(y2);
    31.                 $('#images3 img').width(ui.value);
    32.                 $('#images3 img').height(y3);
    33.             }
    34.  
    35.         })
    36. }) 
    PHP, JavaScript, SQL и другой код пишите внутри тегов
    Код ( (Unknown Language)):
    1. [b]php][/b]Тут код[b][/[/b][b]code][/b][/color]