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

User avatar
Ticketa
Турист
Турист
Posts: 433
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

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

Post by Ticketa » Tue Oct 02, 2018 6:39 pm

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

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

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

Code: Select all

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

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

Code: Select all

.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

Code: Select all

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

<img src="http&#58;//i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate&#40;&#41;" 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
Гуру
Гуру
Posts: 2182
Joined: Fri Dec 08, 2006 8:13 am
Answers: 190
Location: Варна

Post by raiden » Tue Oct 02, 2018 7:11 pm

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

За бутон... има ли причина да не използваш jQuery?

User avatar
Ticketa
Турист
Турист
Posts: 433
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

Post by Ticketa » Wed Oct 03, 2018 4: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:

Code: Select all

<div data-storage="locale" data-id="<?= $img&#91;'image'&#93;; ?>" data-pk="<?= $img&#91;'image_id'&#93;; ?>" 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="$&#123;storage&#125;" data-id="$&#123;id&#125;" class="image-item lot-photo-block">
        <div class="lot-photo-inner">
            <div class="lot-photo-wrp">
                <img src="$&#123;img.src&#125;" 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:
[js](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);
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);
[/js]

raiden
Гуру
Гуру
Posts: 2182
Joined: Fri Dec 08, 2006 8:13 am
Answers: 190
Location: Варна

Post by raiden » Wed Oct 03, 2018 5:25 pm

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

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

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

User avatar
Ticketa
Турист
Турист
Posts: 433
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

Post by Ticketa » Wed Oct 03, 2018 5:33 pm

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

html,php:

Code: Select all


                    <div data-storage="locale" data-id="<?= $img&#91;'image'&#93;; ?>" data-pk="<?= $img&#91;'image_id'&#93;; ?>" 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&#91;'image'&#93;; ?>" class="rotate-lot-photo btn-rotate"></a>
                        </div>
                    </div>

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


[js](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);
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);


[/js]

raiden
Гуру
Гуру
Posts: 2182
Joined: Fri Dec 08, 2006 8:13 am
Answers: 190
Location: Варна

Post by raiden » Wed Oct 03, 2018 5:35 pm

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

<img id="<?=$img['image'];?>" src="<?= $file; ?>" class="normalx" alt="">

User avatar
Ticketa
Турист
Турист
Posts: 433
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

Post by Ticketa » Wed Oct 03, 2018 5:49 pm

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

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

Image

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

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

[html]
<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>[/html]

raiden
Гуру
Гуру
Posts: 2182
Joined: Fri Dec 08, 2006 8:13 am
Answers: 190
Location: Варна

Post by raiden » Wed Oct 03, 2018 6:18 pm

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

User avatar
Ticketa
Турист
Турист
Posts: 433
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

Post by Ticketa » Wed Oct 03, 2018 7:10 pm

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

raiden
Гуру
Гуру
Posts: 2182
Joined: Fri Dec 08, 2006 8:13 am
Answers: 190
Location: Варна

Post by raiden » Wed Oct 03, 2018 7:35 pm

Отговорих ти на ЛС, няма как да не се получат нещата. Най-важното умение при работа с javascript е дебъгването :D

Post Reply