adding 'Next' 'Random' 'previous' buttons to this random image script

Question

I have a random image script, which displays random images on each page load. I want to add Next, Previous and Random buttons to this script, but don't know how to implement them.

Here's the Script

<script type="text/javascript"> 

var Statements = new Array(


'<img src="http://4.bp.blogspot.com/_UdzqQpb36Jo/R9kVS0h1BFI/AAAAAAAAD_o/SRGugAQSF0A/s1600/timming_pictures_37.jpg" height="650" width="625">',
'<img src="http://4.bp.blogspot.com/_UdzqQpb36Jo/SCxOksTrn4I/AAAAAAAAFDg/q3RilNGj9kc/s1600/loving_husbands_03.jpg" height="650" width="625">',
'<img src="http://3.bp.blogspot.com/_lCRnsgTQgRo/Se2KNaw6bpI/AAAAAAAAA5c/yV2PCN0Pmyo/s1600/pic22806.jpg" height="650" width="625">',
'<img src="http://1.bp.blogspot.com/_lCRnsgTQgRo/Se2J4mZjNEI/AAAAAAAAA4s/Q6Z8IlWLS-A/s1600/pic14006.jpg" height="650" width="625">'

);

function GetStatement(outputtype)
{
 if(++Number > Statements.length - 1) Number = 0;
 if (outputtype==0)
 document.write(Statements[Number])
 else if (document.getElementById)
 document.getElementById("ponder").innerHTML=Statements[Number];
}

function GetRandomNumber(lbound, ubound) 
{
 return (Math.floor(Math.random() * (ubound - lbound)) + lbound);
}

var Number = GetRandomNumber(0, Statements.length - 1);
</script> 

<script type="text/javascript"> 

GetStatement(0)

</script>

PS. I am using this script in blogger blog as blogpost.

You should never ever override Number (or any other) built-in function/types! Find a better variable name for 'Number' above. — Nicolae Olariu, Aug 14 '13 at 15:04
Would you mind to restore the accept sign? The code has always worked and you are using it. — Reporter, Jan 13 '14 at 09:42

Reporter · Answer 1 · 2013-08-15T13:32:28.680

0

I don't know your surrounding HTML code. In my eyes you should throw away your code.

Here a simple image gallery that should meet your requirements:

HTML code:

<html>
  <head>
   <meta http-equiv="expires" content="0">
  </head>
  <body onload="randomStartPic()">
    <div id="picture"><img name="picturegallery"></div>
    <div id="navigation">
       <a href="javascript:bw()">Backward</a> | <a href="javascript:fw()">Forward</a>
    </div>
  <body>
</html>

And the Javascript code:

var pics=new Array ("http://4.bp.blogspot.com/_UdzqQpb36Jo/R9kVS0h1BFI/AAAAAAAAD_o/SRGugAQSF0A/s1600/timming_pictures_37.jpg", ...)
var a=0, b = pics.length;

function fw()
{
 if (a == (b - 1))
 {
  a = 0;
 } else {
  a++;
 }
 showPicNo(a);
}

function bw()
{
 if (a == 0)
 {
  a = b - 1;
 } else {
  a--;
 }
 showPicNo(a);
}

function randomStartPic()
{
 a = Math.floor(Math.random() * (b - a)) + a;
 showPicNo(a);
}

function showPicNo(picNumber)
{
 window.document.images["picturegallery"].src=pics[picNumber];
}

At my local computer it did work perfectly...

edited Aug 15 '13 at 13:32

answered Aug 14 '13 at 15:31

Reporter

3,897
5
33
47

Thank you for helping, I have tried your code on my Blogger blog and its working, but it seems the image loads after whole page is loaded when refreshed (F5) ,I want the image to load with the page and also when the 'Back' 'Forward' link is clicked the image loads without whole page being reloaded,is it possible to load whole page when these buttons are pressed,so that a page impression is created. – Sam Mak Aug 14 '13 at 20:58
Unless you don't provide any source code -i.e an URL- it isn't possible to help you. – Reporter Aug 15 '13 at 08:24
I have tried this on this blog for testing purpose. http://testingmetro.blogspot.com/2013/08/test.html this is the blog where i am actually going to use it http://woofhits.blogspot.com/ – Sam Mak Aug 15 '13 at 12:49
I think I can understand you. This is an issue of browser cache. The page will be stored on local computer. If you press F5, the browser loads the html page from cache that is faster than downloading it from Internet. What will happen if you add '' to the head section (see my updated source code)? – Reporter Aug 15 '13 at 13:31
Because you punctation is very bad, it is hard to understand what you really want. It is true that you want to reload the page with a particular picture? – Reporter Aug 15 '13 at 13:39
I want the whole page to be reloaded when someone click the backward and forward links(buttons). At present,only image changes when forward or backward button is clicked.Is it possible to do so? You can check it on http://testingmetro.blogspot.com/2013/08/test.html – Sam Mak Aug 16 '13 at 10:21
If the page shall be reloaded -means refresh-, then it isn't possible. If the page can be loaded new, then it is possible. In that case there are more work to do. – Reporter Aug 16 '13 at 13:07
You got another answer from me. – Reporter Aug 19 '13 at 15:56

Reporter · Accepted Answer · 2014-01-07T14:06:53.697

0

Based on the request from first my answer, here the code:

HTML code:

  <body onload="showPicNo(a)">
    <div id="picture"><img name="picturegallery"></div>
    <div id="navigation">
       <a href="javascript:bw()">Backward</a> | 
       <a href="javascript:fw()">Forward</a> |
       <a href="javascript:shareButton()">Share site</a>
    </div>
  <body>

And the modifed Javascript code:

/*
    The array 'pics' contains all adresses of picture you want to show. Scrope: global
*/
var pics=new Array (
    "https://www.gravatar.com/avatar/9be5d328127c377109b295b5941733fb?s=32&d=identicon&r=PG",
    "https://www.gravatar.com/avatar/1e81ddcda5d50a39c2beeaba3797702a?s=32&d=identicon&r=PG&f=1",
    "https://www.gravatar.com/avatar/f47359966d28f2e603b6f759855970db?s=32&d=identicon&r=PG&f=1",
    "https://www.gravatar.com/avatar/7d1a2026b0dca412b04ec548397b37f6?s=32&d=identicon&r=PG"
    );
/* 
    The variable to used as the minimum number of elements and container for the current picture.
    Because we work with an array, the index from first array element is zero.
    Scope: global
*/ 
var a = 0;
/* 
   The variabe that used as the maximum number of showed pictures.
   Here: The number of elements from array 'pics'. Scrope: global
*/
var b = pics.length;
/*
    The current url that contains the adressbar from browser. Scope: global
*/
var currentUrl = document.URL;
/* 
  ---------------------------------------------------------------------------------
    Initial quicktest, if the parameter 'picnoprogram' does exits.
    The parameter 'picnoprogram' is used parallel as an indicator and
    as persistance layer.
    Scope: global
*/
var existsPicParameter = currentUrl.match(/picnoparam\S*/i);
/*
    Some helper variables. Scope: global
*/
var tmpPicParameter, tmpPicParameterOld;

/*
    First requirement: If the page was loaded at the first time, it shall be show a
    random picture from all available pictures.
    The value of variable 'existsPicParamete' will be Null, if the parameter does not
    exists in the adress bar; else a list of elements will be stored in there.
*/
if (existsPicParameter != null)
{
   /*
        So the page wasn't been loaded at first time.
        We need the index from the last showed picture.
  */
  tmpPicParameter = existsPicParameter[0].match(/picnoparam=\d+/i);
  if (tmpPicParameter != null)
  {
    /*
        Extracting the index from string
    */
    a = parseInt(tmpPicParameter[0].match(/\d+/i));
    tmpPicParameterOld = tmpPicParameter[0];
  }
} else {
    /*
        So the page was loaded at the first time.
        Generate a random number, within the declared range.
    */
    a = Math.floor(Math.random() * (b - a)) + a;
}
/* 
  End of the initial quicktest
  ---------------------------------------------------------------------------------
*/
/*
    The javascript function for forward scrolling.
    It needs an explicit call.
*/
function fw()
{
 if (a == (b - 1))
 {
   /*
     The index of last array element is  the array length minus 1.
     Then reset the counter variable.
   */
   a = 0;
 } else {
  a++;
 }
 navigate(a);
}

/*
    The javascript function for backward scrolling.
    It needs an explicit call.
*/
function bw()
{
 if (a == 0)
 {
  a = b - 1;
 } else {
  a--
 }
 navigate(a);
}

/*
    The javascript function that modified the page url
*/
function navigate(a)
{
 if (existsPicParameter == null)
 {
  if (currentUrl.indexOf("?") == -1)
  {
    currentUrl += "?";
  } else {
    /*
        In case there were already one or more url parameters,
        the seporerator for another one is '&'
    */
    currentUrl += "&";
  }
  /*
    Extend the current url with parameter 'picnoprogram'.
  */
  currentUrl += "picnoparam="+a;
 } else {
  /*
      Update the current parameter value in the adressbar with the new one,
      by replacing.
      Only if the parameter 'picnoprogram' had been alerady exist
  */
  tmpPicParameter[0] = tmpPicParameter[0].replace(/\d+/i,a);
  currentUrl = currentUrl.replace(tmpPicParameterOld,tmpPicParameter[0]);
 }
 /* "Reload the site" */
 window.location.replace(currentUrl);
}

/*
    The javascript function for assigning the stored url to the HTML element 'img'.
    It needs an explicit call.
*/
function showPicNo(picNumber)
{
  window.document.images["picturegallery"].src=pics[picNumber];
}

 /*
   The javascript function that uses the share service from facebook.
   See: http://stackoverflow.com/questions/13223951/facebook-share-button-how-to-implement .
   It needs an explicit call.
 */
 function shareButton()
 {
    /*
      This ist the main part of the solution
    */
    var facebooksUrlForSharingSites = 'https://www.facebook.com/sharer/sharer.php?u='
    facebooksUrlForSharingSites += document.URL;
    /*
     An example way how to transfer the sharing data
    */
    window.open(facebooksUrlForSharingSites,450,420);
 }

Hopefully it meets your requirement.

edited Jan 07 '14 at 14:06

answered Aug 19 '13 at 16:00

Reporter

3,897
5
33
47

Thanks a lot for helping. I want to request only one thing, is it possible to include the function of random images on page-loads in this modified code, like the one in the previous code, and also if its possible to include another button called "random" in this code,so that when it is clicked image loads randomly. lastly I want to know the way to fix height and width of the images? – Sam Mak Aug 21 '13 at 20:34
After a short review of my source code, there was a mistake of mine. I edited my code with your requests. You need just add another button with call of 'randomPicture()'. – Reporter Aug 24 '13 at 18:00
Thank you so much,the edited script is just working fine (showing random image on pageloads) but only random button doesn't works.when clicked the page displays some random no. and the address bar shows this javascript:randomPicture() – Sam Mak Aug 25 '13 at 20:20
Thanks, the random function is now working,but without a page reload(impression).Can it be linked to the navigation function like the backward and forward button. Please respond at your convenience. – Sam Mak Aug 27 '13 at 18:11
I couldn't understand you. The random function does only work if you call 'randomPicture()' or if the url -in browsers adress bar- hasn't got the parameter 'picnoparam'. – Reporter Aug 28 '13 at 15:58
Yes the browser address bar do not show the parameter, as it shows for the forward and backward button. – Sam Mak Aug 30 '13 at 19:10
Hello, I am contacting you to get some help.I want to add facebook share button, which enables a user to share the picture they are viewing, but i believe it cant be done,because i tried to copy paste the link on the address bar (which changes with picture due to currentUrl function) on facebook but it couldn't retrieve the image associated with url, is it possible to make any changes to the script so that images can be shared on facebook and other social media? any help would be much appreciated. – Sam Mak Jan 01 '14 at 18:07
I think you have to create an extra javascript function. There you have to read the current value from variable `a`. Then use this value to read out the url from array and then add that url to the share link, or what ever the share button needs. – Reporter Jan 03 '14 at 10:12
Thank you for replying. The reason I am asking your help is because you made the previous script, so you understand the structure the most.I am novice with all this coding thing and couldn't understand what you said. Can I ask you for one last favour, please if you could provide me the script that is needed to work with existing JavaScript and also with the social media. I would be very grateful to you if you could help me on this. – Sam Mak Jan 03 '14 at 16:22
What exaclty did you mean with "existing JavaScript and also with the social media" ? – Reporter Jan 06 '14 at 11:00
As you said there is a need for another javascript function by that you mean there is need of another javascript or the function will be included within the existing image script? I mean to say that If there is a need of another javascript,in that case it should be working existing image script. – Sam Mak Jan 06 '14 at 11:53
I have updated my code. Addationaly I added comments, so you can find out how it works. – Reporter Jan 06 '14 at 13:36
According to what i understand from your comment above, if the URL from array is used with share button, then it will not be linked to my website, as it is the image URL. What i want to do is that when a user share the image on Facebook it should be linked to my website as if the image is hosted on my domain not externally. I hope you understand my point. Please reply at your convenience. Thanks – Sam Mak Jan 06 '14 at 13:54
Actually i was talking about the comment you made 2 days ago . I am testing this new code to see if it does what i am trying to achieve. Will update you on that. Thanks! – Sam Mak Jan 06 '14 at 14:06
I tried this new code. The share button when clicked do nothing. Also i want to ask whether the image shared with this button links back to my website showing the same image which is shared as if it is hosted on my site.Please respond at your convenience. – Sam Mak Jan 06 '14 at 16:44
The function `shareButton()` should now work. As concerned to your question, I couldn't get any context what you wanted to ask me, sorry. – Reporter Jan 07 '14 at 09:43
I checked again but its not working. As for my question, I wanted to ask that if image is shared which URL will be displayed with it on Facebook, will it be image URL (URL in array) or will it be the Url with parameter displayed on address bar. If later is the case then it will be good because this is what i actually wanted to do( i.e images are not sourced externally but they are hosted my domain itself) Hope you understand my point. – Sam Mak Jan 07 '14 at 13:47
Bug fixed. A javascript function was been misspelled. To your question: you can find it out by yourself, if you insert `alert(facebooksUrlForSharingSites);`. – Reporter Jan 07 '14 at 14:18
Thanks. The share function now works but the problem remains, it fails to load the image associated with the Url on the facebook(address bar url with parameter). If the link is clicked it takes to the right image (on the website) which was intended to be shared on facebook. – Sam Mak Jan 07 '14 at 16:18
Due to the fact I have no account at Facebook, I can not see the result of my self. – Reporter Jan 08 '14 at 10:02
Does sharing a link work if you leave out the parameter? – Reporter Jan 08 '14 at 10:08
No, I think there is no problem relating to parameter. When you share the image,it doesn't load in Facebook. I think you should try it yourself then only you will understand what is actually happening. If you require i can implement the share function on my test blog for testing purpose, and i can also create a Facebook account for you to try it. – Sam Mak Jan 08 '14 at 14:18
Yes I want to take a look. – Reporter Jan 09 '14 at 09:58
Thanks for giving me access to a fb account. So I could take a view. I switched to your second post about this post, becaused it isn't not more relevant for this thread. Don't forget to change your password, because it is a public site. – Reporter Jan 09 '14 at 15:02
sure ill change it. Just inform me when you dont need it anymore. – Sam Mak Jan 09 '14 at 15:11
You can change it. I posted an answer to your second post about this topic. – Reporter Jan 09 '14 at 15:59

adding 'Next' 'Random' 'previous' buttons to this random image script

2 Answers2

Linked