Search jQuery

jQuery Forum

problems with variable in src path

in Using jQuery • 10 years ago

Hello,

I am aware that this maybe is not a jquery specific problem, yet, my code integrates jquey so I might as well ask it here.

I have the following code:

$(document).ready(function(){

$("#sub")

.click(function(){

$("#the_pic").attr('src','images/Memoir_reg/Memoir_1.gif');

$("#the_pic_2").attr('src','images/Memoir_reg/Memoir_2.gif');

$("#the_pic_3").attr('src','images/Memoir_reg/Memoir_3.gif');

$("#the_pic_4").attr('src','images/Memoir_reg/Memoir_4.gif');

$("#the_pic_5").attr('src','images/Memoir_reg/Memoir_5.gif');

$('#sub img').attr('src','images/ita.gif');

});

</script>

</head>

<body>

</div>

Basically I put 2 sub folders in my "images" folder named "reg" and "ita". In there are pictures which I wanted to change their resource in the divs by introducing a variable so that the paths would look like:

and then I wanted to change this variable "style“ to tell him which sub folder to use instead of doing all this:

$("#the_pic").attr('src','images/Memoir_reg/Memoir_1.gif');

$("#the_pic_2").attr('src','images/Memoir_reg/Memoir_2.gif');

$("#the_pic_3").attr('src','images/Memoir_reg/Memoir_3.gif');

$("#the_pic_4").attr('src','images/Memoir_reg/Memoir_4.gif');

$("#the_pic_5").attr('src','images/Memoir_reg/Memoir_5.gif');

and then back.

I think the fault is in the syntax of the path or where to define the variable.

I tried 1000 things but didn’t get this work. :-(

How is this to be done properly.

And (if you like to help me again) how would this be made with toggle,

so that the subfolder changes back and on again on each click?

Thank you so much out there!

Garavani

Replies(4)

alano999

Re: problems with variable in src path

10 years ago

Not only will I fix your problem but, assuming the images are number sequentially, I will dynamically generate the html too. I will also introduce a better scheme to identify both the sub and letter index number... by using custom data attributes.

Furthermore, I have anticipated that you might wish to click on the letter images and do something with that.

Start with only this html inside <body>...

<div id="sub"></div>
<div id="letters"></div>
<ul id="results"></ul>

And this code (untested)...

$(document).ready(function(){
var subs = [ "ita", "reg" ]; //programmable subs definition
var $subs = $("#sub"), $letters = $("#letters"), $results = $("#results"); //cache for speed
var letPath = "images/Memoir_{{sub}}/Memoir_{{idx}}.gif"; //letter path template
//create sub images...
subs.forEach(function(sub) {
$("<img>", { src: "images/" + sub + ".gif", "data-sub": sub }).appendTo($subs);
});
//create letter images using first "sub". Assume images numbered sequentially...
$letters.data("sub", subs[0]); //store selected sub state (first sub, as default)
for (var i = 1; i <= 4; i++) {
var $img = $("<img>", { "data-id": i, src: letPath.replace("{{sub}}", subs[0]).replace("{{idx}}", i) } );
$("</div>").append($img).appendTo($letters);
}
//sub click handler
$subs.on("click", "img", function() {
var sub = $(this).data("sub"); $letters.data("sub", sub); //get and store new sub state
$("img", $letters).each(function() { //iterate each image, applying new sub value
$(this).attr("src", letPath.replace("{{sub}}", sub).replace("{{idx}}", $(this).data("id")));
});
});
//letter click handler
$letters.on("click", "img", function() {
$("<li>", { text: "Sub: " + $letters.data("sub") + ", Image index number: " + $(this).data("id") } ).appendTo($results);
});
});

...it looks long because I have added lots of comments to help you understand what I am doing in my code.

Also, change your CSS definition so that instead of the images within letters being matched using a class name "center fit", you instead match the images hierarchically inside letters. So, in your CSS styles definitions, change ".center fit" to the highlighted definition below...

#letters img {
/* your ".center fit" CSS settings */
cursor: pointer;
}
#sub img { cursor: pointer; } /* add this to invite users to click on the letter images */

It was unclear from your post how the "sub" value is changed. My code requires the user to click on a sub image to change the letter images.

If the images are not sequentially numbered, then let me know and we can make that programmable too, using an array of image names.

Hope this helps you.

Best wishes,

Alan

garavani

Re: problems with variable in src path

10 years ago

Hello Alan!

First of all: thank you so much for your efforts! I am so surprised!

And this stuff looks genius to me! Wow!

Unfortunately the html/CSS/javascripts that I have done so far are very unprofessional gathered pieces of codes found here and there, partially invented with my poor jquery knowledge: so that it was impossible to replace it with the code that you have written. The changes of CSS (and other things I guess) made my scripts collapse into chaos. I tried but didn’t succeed to fix them… :-( (made backups first of course)

And I do not feel to ask you further insights in my scripts and code, would make you sick I believe :-)) maybe laugh in the best case.

But: In case you really really like you may see the (part of) the page running under:

http://www.stefanseifert.com/Adobe_Edge_Tests/Memoir.html

and I leave you the documents.

But as I said there is so much confusing other stuff that it would be very hard to understand something.

Maybe:

I am a graphic designer and beside of this lets say „avant-garde“ stuff (mostly made for fun) I am pretty good in logo design etc. Maybe I could do something for you in return.

If not, simply ignore it

and however many thanks for your help and ideas so far!!

Stefan

Attachments

files.zip
Size : 5.58 KB Downloads : 1554 Download

alano999

Re: problems with variable in src path

10 years ago

Hi Stefan. Sorry, I don't wish to spend much time on a single project.

For a quick-win, simply change the script in your original post above to this...

$(document).ready(function(){
$("#sub").click(function(){
style = (style == "reg") ? "ita" : "reg"; // flip style state
$("img", this).attr("src", "images/" + style + ".gif");
$(".letters img").each(function(){
$(this).attr("src", $(this).attr("src").replace(/_(ita|reg)/, "_" + style));
});
});
});

..it will flip the ita/reg icon and change the src folder of each of the images.

Best wishes,

Alan

garavani

Re: problems with variable in src path

10 years ago

Hi Alan!

Of course you won’t!

I copied your new script and it works brilliant and is very short, too!

And in part I even understand it :-))

Thank you again for your great help!

and good luck

Stefan

Top Reply

Response title

Attachments

jQuery Forum

problems with variable in src path

Replies(4)

Re: problems with variable in src path

Re: problems with variable in src path

Attachments

Re: problems with variable in src path

Re: problems with variable in src path

Statistics

Tags

Actions