We Keep Coding

Changing link suffix with javascript on keypress

I'm new to Javascript, so bear with me. Let's say I have this link: example.com/img/000.png/. It displays an image source, so I'll put it in an image tag. <img src="example.com/img/001.png/">.
When I press a key (right arrow, for example), the link should change (inside the image tag) to example.com/img/001.png/, /002.png/, /003.png/, etc. is is possible, at all, to do this with Javascript, embedded in the raw HTML?
Here are my thoughts so far:
<img src=" <!-- Link generated by Javascript --> ">
<script>
// actually pythonic pseudocode, ok
counter = 0
if (right arrow key pressed):
counter = counter + 1
counterPrep = (3-len(counter))*'0'+str(counter)
// ^^^ changes the link from "1" to "001"
link = "https://www.example.com/img/"+str(counterPrep)+".png
</script>
I know what I'm asking may be unclear, so feel free to ask questions. I usually work in Python, which is why the pseudocode is so "Pythonic".
Thanks!

You can detect the key press of the user using the event called keypress.
The rigth arrow key has a key code 39, so you can do the following :
<img src="example.com/img/001.png" id="myImage">
<script>
var counter = 0;
document.body.addEventListener("keypress", function(e){
if(e.keyCode==39) {
counter ++;
var index = (("00" + counter).slice(-3));
var link = "https://www.example.com/img/"+index+".png";
document.getElementById('myImage').src = link;
}
});
</script>

Please see the snippet below:
document.getElementById("testBtn").onclick = function() {
var imgSrc = document.getElementById("dynamicImg").src;
var start = imgSrc.lastIndexOf("/") + 1, end = imgSrc.lastIndexOf("/") + 4;
var preUrl = imgSrc.substring(0, start);
var postUrl = imgSrc.substring(end, imgSrc.length);
// get the fileName
var imgName = parseInt(imgSrc.substring(start, end)) + 1;
// convert to 000 format
imgName = ("00" + imgName).slice(-3);
// replace img src
document.getElementById("dynamicImg").src = preUrl + imgName + postUrl;
alert(document.getElementById("dynamicImg").src)
};
<img id="dynamicImg" src="example.com/img/000.png" />
<button id="testBtn">
TEST
</button>
The code above will work using dynamic url.
I tried it using onclick button, but you can change the event ti keypress.
I hope this helps.

Displaying the filename of a HREF in Javascript

I have a page with a download button like this:
<a href="http://www.example.nl/filename.pdf" download>DOWNLOAD</a>
Below, I want (text) to automatically display "filename.pdf" (rather than having to do this by hand hundreds of times).
I found the script below that displays the filename of the PAGE but I want it to display the FILENAME of a HREF I've used on the actual page.
Any help is much appreciated.
<script type="text/javascript">
var segment_str = window.location.pathname;
var segment_array = segment_str.split( '/' );
var last_segment = segment_array.pop();
document.write(last_segment);
</script>
Thanks in advance!

Not sure where you want the "text" to display... so I put it in a div
<a href="http://www.example.nl/filename.pdf" download>DOWNLOAD</a>
<div id="result">
</div>
The big change, is to get all the "a" tags, using getElementsByTagName... and then iterating over the list, and then you can use the string split, and pop off the last segment before appending it to a destination.
var input = document.getElementsByTagName('a');
for(i = 0;i < input.length; i++)
{
var segment_str = input[i].href;
var segment_array = segment_str.split( '/' );
var last_segment = segment_array.pop();
document.getElementById("result").innerText += last_segment;
}

Maybe this will help.
<div id=download1></div>
<script>
var filename = 'example.pdf';
$('#download1').html('' + filename + '');
</script>

zippyshare.com direct download links

I'm trying to create a script which gives me direct links to files on zippyshare.com. There is a JS function responsible for the href of the download button. It calculates a value which is necessary for the direct link. For example, the file under this link http://www25.zippyshare.com/v/50781357/file.html brings this:
<a id="dlbutton" href="#"><img src="/images/download.png" alt="Download" border="0"></a>
<script type="text/javascript">
var somffunction = function() {
var a = 469398;
document.getElementById('dlbutton').omg = 469401%78956;
var b = parseInt(document.getElementById('dlbutton').omg) * (469401%3);
var e = function() {if (false) {return a+b+c} else {return (a+3)%b + 3}};
document.getElementById('dlbutton').href = "http://www25.zippyshare.com/d/50781357/"+(b+18)+"/Groove%20Coverage%20-%20Holy%20Virgin%20%28Rob%20Mayth%20Remix%29%204clubbers.com.pl.mp3";
};
</script>
The main problem is, the value of var a is different everytime. I tried to access this value with PHP and then I built some script to calculate the value which is the part of the direct link:
function zippy_id($zippylink)
{
$content = file_get_contents($zippylink);
$val = explode('var a = ',$content);
$val = explode(';',$val[1]);
$val = $val[0];
return (($val+3) % 78956 * (($val+3) % 3)) + 18;
}
The function doesn't give the right value. Can anyone validate this PHP function? Does anybody see a better solution to get direct download links?

It seems like you can ignore your ever changing a, but instead read the other value and adjust your formula, the function e() is just a distraction:
return (469401 % 78956) * (469401 % 3) + 18;
Though this highly looks like inappropriate usage.

Get Image Source URLs from a Different Page Using JS

Everyone:
I'm trying to grab the source URLs of images from one page and use them in some JavaScript in another page. I know how to pull in images using JQuery .load(). However, rather than load all the images and display them on the page, I want to just grab the source URLs so I can use them in a JS array.
Page 1 is just a page with images:
<html>
<head>
</head>
<body>
<img id="image0" src="image0.jpg" />
<img id="image1" src="image1.jpg" />
<img id="image2" src="image2.jpg" />
<img id="image3" src="image3.jpg" />
</body>
</html>
Page 2 contains my JS. (Please note that the end goal is to load images into an array, randomize them, and using cookies, show a new image on page load every 10 seconds. All this is working. However, rather than hard code the image paths into my javascript as shown below, I'd prefer to take the paths from Page 1 based on their IDs. This way, the images won't always need to be titled "image1.jpg," etc.)
<script type = "text/javascript">
var days = 730;
var rotator = new Object();
var currentTime = new Date();
var currentMilli = currentTime.getTime();
var images = [], index = 0;
images[0] = "image0.jpg";
images[1] = "image1.jpg";
images[2] = "image2.jpg";
images[3] = "image3.jpg";
rotator.getCookie = function(Name) {
var re = new RegExp(Name+"=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1];
return'';
}
rotator.setCookie = function(name, value, days) {
var expireDate = new Date();
var expstring = expireDate.setDate(expireDate.getDate()+parseInt(days));
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
rotator.randomize = function() {
index = Math.floor(Math.random() * images.length);
randomImageSrc = images[index];
}
rotator.check = function() {
if (rotator.getCookie("randomImage") == "") {
rotator.randomize();
document.write("<img src=" + randomImageSrc + ">");
rotator.setCookie("randomImage", randomImageSrc, days);
rotator.setCookie("timeClock", currentMilli, days);
}
else {
var writtenTime = parseInt(rotator.getCookie("timeClock"),10);
if ( currentMilli > writtenTime + 10000 ) {
rotator.randomize();
var writtenImage = rotator.getCookie("randomImage")
while ( randomImageSrc == writtenImage ) {
rotator.randomize();
}
document.write("<img src=" + randomImageSrc + ">");
rotator.setCookie("randomImage", randomImageSrc, days);
rotator.setCookie("timeClock", currentMilli, days);
}
else {
var writtenImage = rotator.getCookie("randomImage")
document.write("<img src=" + writtenImage + ">");
}
}
}
rotator.check()
</script>
Can anyone point me in the right direction? My hunch is to use JQuery .get(), but I've been unsuccessful so far.
Please let me know if I can clarify!

Try this.
<script>
$.get('http://path/to/page/1', function(data) {
var imgs = $('<div/>').html(data).find('img');
imgs.each(function(i, img) {
alert(img.src); // show a dialog containing the url of image
});
});
</script>

I don't understand why you want to use cookies for this. You should get page1, find the images, and then use setInterval to update the src.
$.get('page1.html', function(data, status) { // get the page with the images
var parser = new DOMParser();
var xmldoc = parser.parseFromString(data, "text/html"); //turn it into a dom
var imgs = xmldoc.getElementsByTagName('img'); //get the img tags
var imageSrcs = Array.prototype.slice.call(imgs).map(function(img) {
return img.src; //convert them to an array of sources
});
setInterval(function() { // run this every 10 seconds
var imags = document.getElementsByTagName('img'); // find the images on this page
Array.prototype.slice.call(imgs).forEach(function(img) {
var imgSrc = Math.floor(Math.random()*imageSrcs.length); //get a random image source
img.src = imageSrcs[imgSrc]; //set this image to the src we just picked at random
});
}, 10000);
}, 'html');

why not use ajax? you could .load() the section of your external page that contains all of the images into a hidden container and then extrapolate the information you need through a callback.
external.html
<html>
....
<div id="imgContainer">
<img id="image0" src="image0.jpg" />
<img id="image1" src="image1.jpg" />
<img id="image2" src="image2.jpg" />
<img id="image3" src="image3.jpg" />
</div>
</html>
ajax.js
function ajaxContent(reg, extReg) {
var toLoad = 'external.html' + extReg;
function loadContent() {
$(reg).load(toLoad,'',getSrcPaths())
}
function getSrcPaths() {
$(reg + ' #image0').delay(200).fadeIn('slow');
$(reg + ' #image1').delay(200).fadeIn('slow');
// or however you want to store/display the images
}
}
Then onload just make a call to ajaxContent something like
<body onload="ajaxContent('#hiddenContainer','#imgContainer')">
....
</body>
This of course is not really relevant if your images are large or if page load is negatively affected. Although since you actually have the images now, you might even just display them rather than hide them. Depends on exactly how much you need to manipulate the originals I suppose.

how to change the image when a page is refreshed using JavaScript?

I want to change the image when the page is refresh using html. I place my partial code here. i want a script or anything do change the image when the page gets refresh.. Please help me to do this using html ...
<div class="one-image">
<a href="">
<img src="img/IMG_1035.jpg" class="giThumbnail" alt="Nightclubs"></a><h4 class="giDescription">
Nightclubs</h4>
</div>
the above image tag image is change every refresh.. please help me ..

I believe this would work, but all your images would have to be sequentially named, e.g. 1-100. Also note that the script was placed AFTER the IMG tag.
<div class="one-image">
<a href="">
<img id="imgRand" src="" class="giThumbnail" alt="Nightclubs">
</a>
<h4 class="giDescription">
Nightclubs
</h4>
</div>
<script language="javascript">
// random number between 1 and 100
var numRand = Math.floor(Math.random()*101);
document.getElementById("imgRand").src = "img/IMG_"+numRand+".jpg";
</script>
The random formula in JS is:
var random = Math.floor(Math.random() * (max - min + 1)) + min;
so if you only had 5 images between 135 and 140 your script would look like:
var random = Math.floor(Math.random() * (140 - 135 + 1)) + 135;
If you wanted to change the image client-side, like a slideshow, just add a timer.
<script language="javascript">
function setImg(){
// random number between 1 and 100
var numRand = Math.floor(Math.random()*101);
document.getElementById("imgRand").src = "img/IMG_"+numRand+".jpg";}
// call it the first time
setImg();
// set an interval to change it every 30 seconds
window.setInterval("setImg()",30000);
</script>

Not Tested but something like this should work using Javascript:
//Add following inside script tag
//Add id to your image tag
var theImages = new Array();
theImages[0] = 'images/first.gif' // replace with names of images
theImages[1] = 'images/second.gif' // replace with names of images
theImages[2] = 'images/third.gif' // replace with names of images
......
var j = 0
var p = theImages.length;
var preBuffer = new Array();
for (i = 0; i < p; i++){
preBuffer[i] = new Image();
preBuffer[i].src = theImages[i];
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.getElementById("yourImgTagId").src = theImages[whichImage];
}
//call the function
showImage();
Did you mean something like that

What type of server are you using? Using PHP or ASP you can accomplish this using a script that cycles through your images in a script. So your HTML would just point to the script instead of directly to an image:
<img src="image_rotation_script.php" class="giThumbnail" alt="Nightclubs">
Then your script would rotate through your various images. Here is a PHP example:
<?php
header('content-type: image/jpeg');
// Your own logic here to pull from a database, randomize an array of images etc.
$images = array('img/IMG_1.jpg','img/IMG_2.jpg','img/IMG_3.jpg');
$imageFile = array_rand($images);
$image = imagecreatefromjpeg($imageFile);
imagejpeg($image);
imagedestroy($image);
?>

Use can use JavaScript to change the src field of the image tag. First insert an ID attribute to your img tag, or a NAME attribute if it appears more often on the same page.
<img id="nightClubImage" src="img/IMG_1035.jpg" class="giThumbnail" alt="Nightclubs">
Then write a script and change the src field:
document.getElementById('nightClubImage').src = "newImage.jpg";

If you want use only client-side solution try this:
<img src="img/IMG_1035.jpg" class="giThumbnail" alt="Nightclubs">
<script type="text/javascript">
var images = ['img/IMG_1035.jpg', 'img/IMG_1036.jpg', 'img/IMG_1037.jpg'];
document.getElementById('gitThumbnail').src = images[Math.round((Math.random() * (images.length-1))];
</script>