- Ориентация на снимка - промяна при клик
WT форуми -> HTML / Javascript / CSS -> Ориентация на снимка - промяна при клик
Създайте нова тема Напишете отговор 
Автор Съобщение
Ticketa
Турист
Турист

Регистриран на: 27/02/2012 3:54 pm

Support: 23
Bonus: 46
Мнения: 274
Мнение 02/10/2018 8:39 pm     Ориентация на снимка - промяна при клик Отговорете с цитат


Привет,
опитвам се да направя когато се натисне на дадена снимка или бутон върху снимка (и двете неща ще ми вършат работа) снимката да се "завърта" както аз искам.

Когато имам 1бр снимка (прикачена чрез upload форма и опция за преглед "preview") няма проблем - скрипта бачка, но когато имам повече снимки скрипта се чупи, тъй като всяка снимка си има индивидуален №

Ползвам следния код:
jss

function Rotate() {
      var element = document.getElementById('image');

      if (element.className === "normal") {
         element.className = "rotate";
      }
      else if ( element.className === "rotate") {
         element.className = 'normal';
      }
   }

css
.rotate {
   -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
}

.normal {
   -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
}


html
<html>
<head>
</head>
<body>

<img src="http://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image"/>

</body>
</html>


тоест, ако имам:

<img src="http://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image_123456"/>
<img src="http://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image_112323456"/>
<img src="http://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image_12asd34asd56asdasd"/>
<img src="http://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image_123asd45445456"/>

Скрипта няма да работи, тъй като не разчита id="..."
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
raiden
Активен
Активен

Регистриран на: 08/12/2006 10:13 am

Support: 189
Bonus: 464
Мнения: 2181
Мнение 02/10/2018 9:11 pm      Отговорете с цитат


Може вместо да търсиш снимката да я подаваш като аргумент на функцията:
onclick="Rotate(this)"
и да направиш функцията така:
Javascript code:
function Rotate(element) {
if (element.className === "normal") {
element.className = "rotate";
}
else if ( element.className === "rotate") {
element.className = 'normal';
}
}


За бутон... има ли причина да не използваш jQuery?
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Ticketa
Турист
Турист

Регистриран на: 27/02/2012 3:54 pm

Support: 23
Bonus: 46
Мнения: 274
Мнение 03/10/2018 6:54 pm      Отговорете с цитат


Нещо не сработва кода.. Премахването(иконата) работи коректно, но самото завъртане на снимката - не.

прикачвам файловете:

В конзолата на FireBug получавам следната грешка:
Цитат:

ReferenceError: element is not defined[Learn More]
image-uploader.js:95:1
rotatePhoto
/image-uploader.js:95:1
imageUploader/<
/image-uploader.js:228:17
dispatch

Редове: 95: if (element.className === "normalx") {
редове: 228: rotatePhoto($(this));



html/php:

<div data-storage="locale" data-id="<?= $img['image']; ?>" data-pk="<?= $img['image_id']; ?>" class="image-item lot-photo-block">
                        <div class="lot-photo-inner">
                            <div class="lot-photo-wrp">
                                <img src="<?= $file; ?>" class="normalx" alt="">
                            </div>
                            <a href="#" class="del-lot-photo btn-remove"></a>
                            <a href="#" class="rotate-lot-photo btn-rotate"></a>
                        </div>
                    </div>

<script id="item-image" type="text/x-jquery-tmpl">
    <div data-storage="${storage}" data-id="${id}" class="image-item lot-photo-block">
        <div class="lot-photo-inner">
            <div class="lot-photo-wrp">
                <img src="${img.src}" class="normalx" alt="">
            </div>
            <a href="#" class="del-lot-photo btn-remove"></a>
            <a href="#" class="rotate-lot-photo btn-rotate"></a>
        </div>
    </div>
</script>



jQuery:
Javascript code:
(function ($) {
var defaults = {
csrfToken: null,
csrfTokenName: null,
uploadUrl: '',
deleteUrl: '',
arrangeUrl: '',
mainPhotoText: '',
additionalPhotoText: '',
photos: []
};

function imageUploader(el, options) {
var settings = $.extend({}, defaults, options);
var $main = $(el);
var $identifier = $('input[name="identifier"]', $main).val();
var $images = $('.image-container');
var csrfParams = settings.csrfToken ? '&' + settings.csrfTokenName + '=' + settings.csrfToken : '';
var $loader = $('.loader-progresbar-wrp', $main);

function updateAction() {
size = $('.image-container .image-item').size();
if (size > 1) {
$('#image-upload-block .add-photo-top').html('<p>'+ settings.mainPhotoText +'</p><p>'+ settings.additionalPhotoText +'</p>');
} else {
$('#image-upload-block .add-photo-top').html('<p>'+ settings.mainPhotoText +'</p>');
}
}

function addPhoto(resp) {
var data = {
'img': {'src': resp.data.file},
'id': resp.data.name,
'storage': 'tmp',
'size': resp.data.size
};
var $item = $('#item-image').tmpl(data);

$images.append($item);
updateAction();

return $item;
}

function deletePhoto(el) {
var photo = $(el).parents('.image-item');
var id = photo.data('id');
var pk = photo.data('pk');
var storage = photo.data('storage');
var model = $('input[name="model"]').val();

var data = {
'id': id,
'pk': pk,
'storage': storage,
'model': model,
'identifier': $identifier
};
if (settings.csrfToken)
data[settings.csrfTokenName] = settings.csrfToken;

$.ajax({
type: 'POST',
dataType: 'json',
url: settings.deleteUrl,
data: data,
success: function (data) {
if (data.response.status == 'success') {
photo.remove();
$('input[name="sort[' + (pk ? pk : id) + ']"]', '.sorted-container').remove();
} else {
/*alert(data.response.status);*/
}
}
});
updateAction();
}
function rotatePhoto(el) {
var photo = $(el).parents('.image-item');
var id = photo.data('id');
var pk = photo.data('pk');
var storage = photo.data('storage');
var model = $('input[name="model"]').val();

var data = {
'id': id,
'pk': pk,
'storage': storage,
'model': model,
'identifier': $identifier
};
if (settings.csrfToken)
data[settings.csrfTokenName] = settings.csrfToken;

if (element.className === "normalx") {
element.className = "rotatex";
}
else if ( element.className === "rotatex") {
element.className = 'normalx';
}

updateAction();
}
function update() {
$('.sorted-container').empty();
$($images).find('.image-item').each(function (i, val) {
var id = $(val).data('id');
var pk = $(val).data('pk');
$('.sorted-container').append('<input type="hidden" name="sort[' + (pk ? pk : id) + ']" value="' + i + '">');
});
}

function multiUploadIE() {

$($loader).find('.loader-progresbar').css({'width': '0%'});
$loader.show();
$($loader).find('.loader-progresbar').css({'width': '50%'});

var ids = [];

$.ajax({
type: 'POST',
url: settings.uploadUrl,
data: $(':input', '#form-create-lot').add(':not(:file)').serializeArray(),
files: $(":file", '#form-create-lot'),
iframe: true,
processData: false,
dataType: "json"
}).complete(function (resp) {
if (resp.status == 200) {
var resp = JSON.parse(resp.responseText);
if (resp.response.status == 'success') {
addPhoto(resp.response);
update();
} else {
$.each(resp.response.data.file, function (i, e) {
alert(e);
});
}

$($loader).find('.loader-progresbar').css({'width': '100%'});
} else {
alert("Error");
}
$loader.hide();
});
return false;
}

function multiUpload(files) {

var uploadFileName = $('.file', $main).attr('name');

var filesCount = files.length;
var uploadedCount = 0;
var ids = [];
for (var i = 0; i < filesCount; i++) {

$($loader).find('.loader-progresbar').css({'width': '1%'});
$loader.show();

var fd = new FormData();
fd.append(uploadFileName, files[i]);
fd.append('identifier', $identifier);

if (settings.csrfToken) {
fd.append(settings.csrfTokenName, settings.csrfToken);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', settings.uploadUrl, true);
xhr.onload = function () {
uploadedCount++;
if (this.status == 200) {
var resp = JSON.parse(this.response);
if (resp.response.status == 'success') {
addPhoto(resp.response);
update();
} else {
$.each(resp.response.data.file, function (i, e) {
alert(e);
});
}
} else {
alert("Error");
}
$loader.hide();

};

xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
$($loader).find('.loader-progresbar').css({'width': (e.loaded / e.total) * 100});
}
};

xhr.send(fd);
}
return false;
}

$('.file', $main).attr('multiple', 'true').on('change', function (e) {


if (!window.FormData) {
multiUploadIE();
} else {
multiUpload(this.files);
}

});

$($images).sortable({
stop: function () {
update();
},
cancel: '.add-photo',
forcePlaceholderSize: true,
placeholder: 'lot-plaseholder'
}).disableSelection();

$('#image-upload-block').on('click', 'a.btn-remove', function () {

deletePhoto($(this));
return false;
});
$('#image-upload-block').on('click', 'a.btn-rotate', function () {

rotatePhoto($(this));
return false;
});

}

$.fn.imageUploader = function (options) {
if (this.length) {
this.each(function () {
imageUploader(this, options);
});
}
};

})(jQuery);
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
raiden
Активен
Активен

Регистриран на: 08/12/2006 10:13 am

Support: 189
Bonus: 464
Мнения: 2181
Мнение 03/10/2018 7:25 pm      Отговорете с цитат


Не виждам елемента с id=image-upload-block към който слагаш listener-ите
Иначе във функцията rotatePhoto:
Javascript code:
var element = $(el).find('img');
if (element.hasClass('normal')) {
element.removeClass('normal').addClass('rotate');
}
else if (element.hasClass('rotate')) {
element.removeClass('rotate').addClass('normal');
}


Всъщност даже нямаш нужда от класа normal, картинката по подразбиране си е без ротация, така че можеш да направиш и направо така:
Javascript code:
var element = $(el).find('img');
element.toggleClass('rotate');


Още по-добре ще е ако сложиш id на img елемента, а на самия бутон (.btn-rotate) сложиш data-target="id-то на снимката която ще се върти с този бутон". После само си слагаш 1 listener на всички бутони:
Javascript code:
$('.btn-rotate').click(function () {
$('#'+$(this).data('target')).toggleClass('rotate');
});
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Ticketa
Турист
Турист

Регистриран на: 27/02/2012 3:54 pm

Support: 23
Bonus: 46
Мнения: 274
Мнение 03/10/2018 7:33 pm      Отговорете с цитат


Не ми се получи отново:

html,php:


                    <div data-storage="locale" data-id="<?= $img['image']; ?>" data-pk="<?= $img['image_id']; ?>" class="image-item lot-photo-block">
                        <div class="lot-photo-inner">
                            <div class="lot-photo-wrp">
                                <img src="<?= $file; ?>" class="normalx" alt="">
                            </div>
                            <a href="#" class="del-lot-photo btn-remove"></a>
                            <a href="#"  data-target="<?= $img['image']; ?>" class="rotate-lot-photo btn-rotate"></a>
                        </div>
                    </div>

<script id="item-image" type="text/x-jquery-tmpl">
    <div data-storage="${storage}" data-id="${id}" class="image-item lot-photo-block">
        <div class="lot-photo-inner">
            <div class="lot-photo-wrp">
                <img src="${img.src}" class="normalx" alt="">
            </div>
            <a href="#" class="del-lot-photo btn-remove"></a>
            <a href="#" data-target="${id}" class="rotate-lot-photo btn-rotate"></a>
        </div>
    </div>
</script>




Javascript code:
(function ($) {
var defaults = {
csrfToken: null,
csrfTokenName: null,
uploadUrl: '',
deleteUrl: '',
arrangeUrl: '',
mainPhotoText: '',
additionalPhotoText: '',
photos: []
};

function imageUploader(el, options) {
var settings = $.extend({}, defaults, options);
var $main = $(el);
var $identifier = $('input[name="identifier"]', $main).val();
var $images = $('.image-container');
var csrfParams = settings.csrfToken ? '&' + settings.csrfTokenName + '=' + settings.csrfToken : '';
var $loader = $('.loader-progresbar-wrp', $main);

function updateAction() {
size = $('.image-container .image-item').size();
if (size > 1) {
$('#image-upload-block .add-photo-top').html('<p>'+ settings.mainPhotoText +'</p><p>'+ settings.additionalPhotoText +'</p>');
} else {
$('#image-upload-block .add-photo-top').html('<p>'+ settings.mainPhotoText +'</p>');
}
}

function addPhoto(resp) {
var data = {
'img': {'src': resp.data.file},
'id': resp.data.name,
'storage': 'tmp',
'size': resp.data.size
};
var $item = $('#item-image').tmpl(data);

$images.append($item);
updateAction();

return $item;
}

function deletePhoto(el) {
var photo = $(el).parents('.image-item');
var id = photo.data('id');
var pk = photo.data('pk');
var storage = photo.data('storage');
var model = $('input[name="model"]').val();

var data = {
'id': id,
'pk': pk,
'storage': storage,
'model': model,
'identifier': $identifier
};
if (settings.csrfToken)
data[settings.csrfTokenName] = settings.csrfToken;

$.ajax({
type: 'POST',
dataType: 'json',
url: settings.deleteUrl,
data: data,
success: function (data) {
if (data.response.status == 'success') {
photo.remove();
$('input[name="sort[' + (pk ? pk : id) + ']"]', '.sorted-container').remove();
} else {
/*alert(data.response.status);*/
}
}
});
updateAction();
}
function update() {
$('.sorted-container').empty();
$($images).find('.image-item').each(function (i, val) {
var id = $(val).data('id');
var pk = $(val).data('pk');
$('.sorted-container').append('<input type="hidden" name="sort[' + (pk ? pk : id) + ']" value="' + i + '">');
});
}

function multiUploadIE() {

$($loader).find('.loader-progresbar').css({'width': '0%'});
$loader.show();
$($loader).find('.loader-progresbar').css({'width': '50%'});

var ids = [];

$.ajax({
type: 'POST',
url: settings.uploadUrl,
data: $(':input', '#form-create-lot').add(':not(:file)').serializeArray(),
files: $(":file", '#form-create-lot'),
iframe: true,
processData: false,
dataType: "json"
}).complete(function (resp) {
if (resp.status == 200) {
var resp = JSON.parse(resp.responseText);
if (resp.response.status == 'success') {
addPhoto(resp.response);
update();
} else {
$.each(resp.response.data.file, function (i, e) {
alert(e);
});
}

$($loader).find('.loader-progresbar').css({'width': '100%'});
} else {
alert("Error");
}
$loader.hide();
});
return false;
}

function multiUpload(files) {

var uploadFileName = $('.file', $main).attr('name');

var filesCount = files.length;
var uploadedCount = 0;
var ids = [];
for (var i = 0; i < filesCount; i++) {

$($loader).find('.loader-progresbar').css({'width': '1%'});
$loader.show();

var fd = new FormData();
fd.append(uploadFileName, files[i]);
fd.append('identifier', $identifier);

if (settings.csrfToken) {
fd.append(settings.csrfTokenName, settings.csrfToken);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', settings.uploadUrl, true);
xhr.onload = function () {
uploadedCount++;
if (this.status == 200) {
var resp = JSON.parse(this.response);
if (resp.response.status == 'success') {
addPhoto(resp.response);
update();
} else {
$.each(resp.response.data.file, function (i, e) {
alert(e);
});
}
} else {
alert("Error");
}
$loader.hide();

};

xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
$($loader).find('.loader-progresbar').css({'width': (e.loaded / e.total) * 100});
}
};

xhr.send(fd);
}
return false;
}

$('.file', $main).attr('multiple', 'true').on('change', function (e) {


if (!window.FormData) {
multiUploadIE();
} else {
multiUpload(this.files);
}

});

$($images).sortable({
stop: function () {
update();
},
cancel: '.add-photo',
forcePlaceholderSize: true,
placeholder: 'lot-plaseholder'
}).disableSelection();

$('#image-upload-block').on('click', 'a.btn-remove', function () {

deletePhoto($(this));
return false;
});
}
$('.btn-rotate').click(function () {
$('#'+$(this).data('target')).toggleClass('rotate');
});
$.fn.imageUploader = function (options) {
if (this.length) {
this.each(function () {
imageUploader(this, options);
});
}
};

})(jQuery);


Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
raiden
Активен
Активен

Регистриран на: 08/12/2006 10:13 am

Support: 189
Bonus: 464
Мнения: 2181
Мнение 03/10/2018 7:35 pm      Отговорете с цитат


id-то го премести на img елемента

<img id="<?=$img['image'];?>" src="<?= $file; ?>" class="normalx" alt="">
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Ticketa
Турист
Турист

Регистриран на: 27/02/2012 3:54 pm

Support: 23
Bonus: 46
Мнения: 274
Мнение 03/10/2018 7:49 pm      Отговорете с цитат


Отново не се получава, по-странното е че не дава и грешка в конзолата.

Единствено когато се натисне бутона се добавя хаштаг/диес (#) в адрес бара. Нищо друго.

Ориентация на снимка - промяна при

Дори след изтриване на кеш и т.н. (стандартните процедури) резултата е никакъв.

Всъщност при "прикачване" на снимката/елемента html резултата се превръща и изглежда така:

HTML code:

<div class="lot-photo-block-wrp image-container ui-sortable" style="cursor: pointer">
<div data-storage="tmp" data-id="b3fc69318d6ee59ce5d96f1b078eafa5.png" class="image-item lot-photo-block">
<div class="lot-photo-inner">
<div class="lot-photo-wrp">
<img id="b3fc69318d6ee59ce5d96f1b078eafa5.png" src="/tmp/thumbs/b3fc69318d6ee59ce5d96f1b078eafa5.png" class="normalx" alt="">
</div>
<a href="#" class="del-lot-photo btn-remove"></a>
<a href="#" data-target="b3fc69318d6ee59ce5d96f1b078eafa5.png" class="rotate-lot-photo btn-rotate"></a>
</div>
</div>
</div>
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
raiden
Активен
Активен

Регистриран на: 08/12/2006 10:13 am

Support: 189
Bonus: 464
Мнения: 2181
Мнение 03/10/2018 8:18 pm      Отговорете с цитат


Ако бутона го няма в DOM при зареждане на страницата, а се добавя в последствие - тогава това няма да работи:
Javascript code:
$('.btn-rotate').click(function () {
$('#'+$(this).data('target')).toggleClass('rotate');
});

защото при зареждане на страницата още няма за какво да се закачи. Можеш да го закачиш на който и да е parent на бутона, който съдържа и всички останали бутони и съществува при зареждането на страницата. Или по-глобалното решение:
Javascript code:
$(document).on('click', '.btn-rotate', function () {
$('#'+$(this).data('target')).toggleClass('rotate');
});
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Ticketa
Турист
Турист

Регистриран на: 27/02/2012 3:54 pm

Support: 23
Bonus: 46
Мнения: 274
Мнение 03/10/2018 9:10 pm      Отговорете с цитат


Дори й глобално прикачената снимка не се завърта..явно няма да се получат нещата.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
raiden
Активен
Активен

Регистриран на: 08/12/2006 10:13 am

Support: 189
Bonus: 464
Мнения: 2181
Мнение 03/10/2018 9:35 pm      Отговорете с цитат


Отговорих ти на ЛС, няма как да не се получат нещата. Най-важното умение при работа с javascript е дебъгването Very Happy
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Ticketa
Турист
Турист

Регистриран на: 27/02/2012 3:54 pm

Support: 23
Bonus: 46
Мнения: 274
Мнение 03/10/2018 10:34 pm      Отговорете с цитат


+1

Остава да поработя по въпроса, когато се натисне бутона за качване на снимката, да се прикачи така както съм е настройл. Тъй като към момента се прикачва в първа "фаза" , вместо да бъде завъртяна.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
raiden
Активен
Активен

Регистриран на: 08/12/2006 10:13 am

Support: 189
Bonus: 464
Мнения: 2181
Мнение 03/10/2018 10:56 pm      Отговорете с цитат


Само да уточним нелепия проблем
Понеже id-то на img елемента е b3fc69318d6ee59ce5d96f1b078eafa5.png, селекторът става #b3fc69318d6ee59ce5d96f1b078eafa5.png и всъщност търси елемент с id b3fc69318d6ee59ce5d96f1b078eafa5 и клас png.
Решението беше селектор за атрибут:
[id="b3fc69318d6ee59ce5d96f1b078eafa5.png"]
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Покажи мнения от преди:    
Създайте нова тема   Напишете отговор    web-tourist.net Форуми -> HTML / Javascript / CSS Часовете са според зоната GMT + 2 Часа
Страница 1 от 1


 
Идете на:  
Не Можете да пускате нови теми
Не Можете да отговаряте на темите
Не Можете да променяте съобщенията си
Не Можете да изтривате съобщенията си
Не Можете да гласувате в анкети