Jump to content
  • 0

Вопрос про Var


Arinden
 Share

Question

Добрый вечер! Я не знаю JavaScript, знаю самый самый минимум. Столкнулся с проблемой создания var, имя которого формируется из id_имяфайла:

var id+"_"+$(this).attr('src') = 0;

т.е. скажем src у меня имеет значение 1.jpg и я хочу var с именем id_1.jpg равный 0. К сожалению, это не работает. Прошу меня поправить... Заранее благодарю всех и каждого за помощь.

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0

Добрый вечер! Я не знаю JavaScript, знаю самый самый минимум. Столкнулся с проблемой создания var, имя которого формируется из id_имяфайла:

var id+"_"+$(this).attr('src') = 0;

т.е. скажем src у меня имеет значение 1.jpg и я хочу var с именем id_1.jpg равный 0. К сожалению, это не работает. Прошу меня поправить... Заранее благодарю всех и каждого за помощь.

1) Нафига?

2) Так сделать нельзя.

Link to comment
Share on other sites

  • 0

Понял... Я делаю скрипт. Скажем, есть у меня страница с энным количеством изображений, все из которых разного размера и расположены по схеме:

<img class="imgcl" src="/img1.jpg" ................. />

<img class="imgcl" src="/img2.jpg" ................. />

<img class="imgcl" src="/img3.jpg" ................. />

<img class="imgcl" src="/img4.jpg" ................. />

У этих изображений один и тот же класс для того, чтобы отличить изображения на которые распространяется действие скрипта от изображений относящихся к дизайну. А то к ним можно было бы обратиться по общему тегу img, входящему в состав, скажем, тега div. По нажатию на одну из этих картинок должен открываться невидимый до этого отцентрованный поп-ап, с увеличенной (подгруженной) копией этого изображений. Клик по поп-апу закрывает его, а повторное нажатие на изображение, которое уже раз было нажато должно просто открывать поп-ап и показывать это изображение без подгрузки, так как оно уже раз было загружено. Скрипт у меня готов, но он работает только если у меня есть 1 изображение. Теперь пытаюсь придумать решение для вышеописанного. И я придумал, что если изображению по которому произвели клик присваивать уникальный id_имяфайла, то при дальнейших кликах можно сравнивать if этот элемент был раз нажат id_имяфайла = 1, тогда закрыть его, else if этот файл был уже раз закрыт id_имяфайла = 2 тогда открыть без подгрузки, либо этот img никогда раньше не был нажат тогда id_имяфайла = 0 и мы его грузим, открываем и даём id = 1....

Edited by Arinden
Link to comment
Share on other sites

  • 0

Сделать можно через объект с соотв. полями:

var img_counts = {}

$('.imgcl').each(
function(i,el) {
img_counts["id_" + $(el).attr('src')] = 0;
}
);

for (var i in img_counts) alert(i + ': ' + img_counts[i]);

Но действительно незачем. Картинка, если она уже была загружена, при последующих запросах и так будет грузиться мгновенно (из кеша). И для закрытия попапа, имхо, совсем необязательно знать предысторию загрузки картинок в него.

Покажите более полный пример - вместе набросаем простое и изящное решение без таких подвывертов...

Link to comment
Share on other sites

  • 0

Понял... Я делаю скрипт. Скажем, есть у меня страница с энным количеством изображений, все из которых разного размера и расположены по схеме:

<img class="imgcl" src="/img1.jpg" ................. />

<img class="imgcl" src="/img2.jpg" ................. />

<img class="imgcl" src="/img3.jpg" ................. />

<img class="imgcl" src="/img4.jpg" ................. />

У этих изображений один и тот же класс для того, чтобы отличить изображения на которые распространяется действие скрипта от изображений относящихся к дизайну. А то к ним можно было бы обратиться по общему тегу img, входящему в состав, скажем, тега div. По нажатию на одну из этих картинок должен открываться невидимый до этого отцентрованный поп-ап, с увеличенной (подгруженной) копией этого изображений. Клик по поп-апу закрывает его, а повторное нажатие на изображение, которое уже раз было нажато должно просто открывать поп-ап и показывать это изображение без подгрузки, так как оно уже раз было загружено. Скрипт у меня готов, но он работает только если у меня есть 1 изображение. Теперь пытаюсь придумать решение для вышеописанного. И я придумал, что если изображению по которому произвели клик присваивать уникальный id_имяфайла, то при дальнейших кликах можно сравнивать if этот элемент был раз нажат id_имяфайла = 1, тогда закрыть его, else if этот файл был уже раз закрыт id_имяфайла = 2 тогда открыть без подгрузки, либо этот img никогда раньше не был нажат тогда id_имяфайла = 0 и мы его грузим, открываем и даём id = 1....

Насколько я понял, вы пытаетесь реализовать то, что люди триста лет назад реализовали в таких скриптах как SlimBox, LightBox

Технология там немного другая. Каждой картинке добавляется некий rel="uniqueID", по которому срабатывает действие скрипта.

  • Like 1
Link to comment
Share on other sites

  • 0
Это бредово. Если уж так делать, то лучше делать с обычным объектом, а не мучить глобальный так подходом.

Бредово или не бредово - это уже второй вопрос. ТС в принципе спрашивал как динамически формировать переменную в JS, а я ему ответил.

Link to comment
Share on other sites

  • 0
Это бредово. Если уж так делать, то лучше делать с обычным объектом, а не мучить глобальный так подходом.

Бредово или не бредово - это уже второй вопрос. ТС в принципе спрашивал как динамически формировать переменную в JS, а я ему ответил.

Но не все переменные таким образом создать получится... Про это надо помнить.

Link to comment
Share on other sites

  • 0
Это бредово. Если уж так делать, то лучше делать с обычным объектом, а не мучить глобальный так подходом.

Бредово или не бредово - это уже второй вопрос. ТС в принципе спрашивал как динамически формировать переменную в JS, а я ему ответил.

Ну это не повод давать же плохие советы. Можно написать, что так то и так то плохо, хотя тоже можно. А лучше так то и так то :)

Link to comment
Share on other sites

  • 0

Но действительно незачем. Картинка, если она уже была загружена, при последующих запросах и так будет грузиться мгновенно (из кеша). И для закрытия попапа, имхо, совсем необязательно знать предысторию загрузки картинок в него.

Покажите более полный пример - вместе набросаем простое и изящное решение без таких подвывертов...

Я пока не в состоянии осилить Ваш код так сразу... Постараюсь разобраться...

У меня немного нестандартная логика + к этому нулевые познания, поэтому вот что у меня получилось... Прошу сильно не бить :D Буду рад любой помощи!


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){

function centerPopup(){ // Функция для центрирования попап дива.
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popup").height();
var popupWidth = $("#popup").width();
$("#popup").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
};

var img = $(".myimage")[0]; // Получаю данные о ширине и высоте изображения, на которое нажали.
var pic_real_width, pic_real_height;
$("<img/>")
.attr("src", $(img).attr("src"))
.load(function() {
pic_real_width = this.width;
pic_real_height = this.height;
});

var status = 0; // Вводим status = 0, чтобы удостовериться, что ни одно изображение не было нажато.

$(".myimage").click(function() {
if (status===0) {
$(this).fadeTo("fast", 0.15);
$("#loading").show(); // Это гиф загрузки изображения
var x=$(this).attr('src');
var y = x.replace(/_sm/,'_lg'); // На сервере будет две картинки, одна скажем img1_sl.jpg ( например 200 x 100) и другая img1_lg.jpg её увеличенная копия
$("#popupimg").attr('src',y);
$("#popupimg").attr('width', pic_real_width*5); // Не придумал ничего умнее, чем умножать ширину и длину на 5, хотя в идеале картинки будут разного размера и нужно будет ввести ограничение, на случай если увеличенная копия слишком большая, открывать её в ограниченном размере, а если меньше то в оригинальном.
$("#popupimg").attr('height', pic_real_height*5);
$("#popupimg").load(function(){
$("#loading").hide();
$(this).fadeTo("fast", 1);
centerPopup();
$("#popup").fadeIn(1000);
status = 1;
});
}
else if (status===1) { // Статус 1 говорит мне о том, что изображение было нажато и открыто. Закрываем его.
$("#popup").fadeOut(300);
status = 2;
}
else if (status===2) { // Изображение было раз уже открыто и закрыто, т.е. для его повторного открытия можно не включать гиф, а сразу открыть попап.
var x=$(this).attr('src');
var y = x.replace(/_sm/,'_lg');
$("#popupimg").attr('src',y);
$("#popupimg").attr('width', pic_real_width*5);
$("#popupimg").attr('height', pic_real_height*5);
$("#popupimg").load(function(){
centerPopup();
$("#popup").fadeIn(1000);
status = 1;
});
};
});
});
</script>
</head>
<body>
<div class="container"><img class="myimage" src="DSC03343_sm.jpg" /><img id="loading" src="loading.gif" /></div>
<div><img class="myimage" src="2011_sm.jpg" /><img id="loading" src="loading.gif" /></div>
<div id="popup"><img id="popupimg" src="" /></div>
</body>
</html>

window["id_" + $(this).attr("src")] = 0;

Спасибо, попробую в этом разобраться..

Насколько я понял, вы пытаетесь реализовать то, что люди триста лет назад реализовали в таких скриптах как SlimBox, LightBox

Технология там немного другая. Каждой картинке добавляется некий rel="uniqueID", по которому срабатывает действие скрипта.

Это да, Вы правы.. Просто я не хочу использовать готовые решения. Но, спасибо за наводку, почитаем про rel="uniqueID" - лишним не будет.

Link to comment
Share on other sites

  • 0

Это да, Вы правы.. Просто я не хочу использовать готовые решения. Но, спасибо за наводку, почитаем про rel="uniqueID" - лишним не будет.

Это не стандартное решение, посмотрите на реализацию SlimBox'a

  • Like 1
Link to comment
Share on other sites

  • 0

Это не стандартное решение, посмотрите на реализацию SlimBox'a

Невероятно! Это действительно очень интересная реализация того, что мне нужно... Лично мне, наверное, будет правильнее использовать это решение, пока не научусь делать нечто подобное самостоятельно. Вы меня обрадовали своим советом, 4 кб счастья со всеми необходимыми функциями... Главное что просто и эффектно. Спасибо!

Link to comment
Share on other sites

  • 0

Невероятно! Это действительно очень интересная реализация того, что мне нужно... Лично мне, наверное, будет правильнее использовать это решение, пока не научусь делать нечто подобное самостоятельно. Вы меня обрадовали своим советом, 4 кб счастья со всеми необходимыми функциями... Главное что просто и эффектно. Спасибо!

На здоровье. Будет что-то непонятно, спрашивайте.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy