How to slice a String Object and return the new value in jQuery?

Question

So basically I have a gallery script in jQuery. When a user clicks on a thumbnail image the image attribute src is then transferred to the main gallery img element. However I now want the user to be able to click a next/prev button and iterate through all the images in the folder. I named them all img0.jpg, img1.jpg and so on. I was thinking I could simply get the current img src via "attr()" and "slice()" then increment the number in the img'0', img'1' etc... with a variable. Heres my code. I hope you guys can understand!

$("#next").click(function () {
   var i = 0;
   var sliceImg = $("#gallerycover").attr("src").slice('0', String.length - 5);
   $("#gallerycover").attr("src", sliceImg + i++ +."jpg");
});

<div id="gallerycontainer">
  <img id="gallery" src="" />
</div>

<div id="thumbcontainer">
  <div id="box4"><img class="thumb" src="" /></div>
</div>

Nelson Benítez León · Accepted Answer · 2013-04-04 21:54:35Z

1

Try replacing your following code:

var sliceImg = $("#gallerycover").attr("src").slice('0', String.length - 5);
$("#gallerycover").attr("src", sliceImg + i++ +."jpg");

for this one:

var src = $("#gallerycover").attr("src");
var idx = src.indexOf('img');
var sliceImg = src.slice(idx+3, src.length - 4);
$("#gallerycover").attr("src", (parseInt(sliceImg, 10) + 1) + ".jpg");

See working demo

edited Apr 4, 2013 at 21:54

answered Apr 4, 2013 at 21:42

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

johnnyzoo Over a year ago

the directory for each image folder set is fairly large e.g. "images/gallery/environments/gameprops/img0.jpg" Will this affect the code you game me?

Nelson Benítez León Over a year ago

Based on that path pattern, the code should work, but the best to know is try it out! :-)

johnnyzoo Over a year ago

can you explain also the parseInt line?? Yes sure I will upvote if it works!

Nelson Benítez León Over a year ago

parseInt() is a function to convert from string to number, we need this as a prior step to later increment it by one. The + operator when applied on a number variable acts as a sum, but when applied on a string variable acts as concatenation operator, so we need to convert sliceImg to number with parseInt() so the + acts as a normal sum operator. We also use its second parameter to specify the base we want to convert to, as we want a normal decimal number, so we use 10 as second parameter.

Nelson Benítez León Over a year ago

The second parameter to parseInt() is optional but recommended to use it, to avoid errors such as in this example call: parseInt('043') will convert to octal (instead of decimal) because of the leading zero, so if we use parseInt('043', 10) then we are sure it converts to decimal.

|

Derek · Accepted Answer · 2013-04-04 21:42:09Z

0

you can use a regular expression to split up your image source string, or you can have your slider keep better track of individual slides by adding an attribute to the thumbnail that your next/previous functions can check and increment without having to parse strings (which can possibly change in the future).

answered Apr 4, 2013 at 21:42

Derek

4,7513 gold badges25 silver badges41 bronze badges

Comments

user1467267 · Accepted Answer · 2013-04-04 21:44:18Z

0

var myInt = 0;
var myInt++;

var sliceImg = $("#gallerycover").attr("src").replace(/\d+/, myInt);

$("#gallerycover").attr("src", sliceImg);

answered Apr 4, 2013 at 21:44

user1467267

Collectives™ on Stack Overflow

How to slice a String Object and return the new value in jQuery?

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related