The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

java script slide show

View previous topic View next topic Go down

Solved java script slide show

Post by millers on May 31st 2010, 3:07 pm

hi can someone please tell me how i can have a slide show like the one you have where it says pick your theme i want one for my homepage but bigger !!!! Very Happy

millers
Forumember

Male Posts : 299
Reputation : 0
Language : uk
Location : Lancashire

Back to top Go down

Solved Re: java script slide show

Post by RoNo on June 1st 2010, 11:17 am

Do you have the images ready?
What Url's will they be linked to?

RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

http://bf2mercenaries.forumotion.com/

Back to top Go down

Solved Re: java script slide show

Post by millers on June 1st 2010, 12:21 pm

first of all i need the html script so i can test it on my forum so i can get the right size then am going to make the pics to put on it!! and i dont want it to have urls and just want it to be a slide show, do you have the html code ?

millers
Forumember

Male Posts : 299
Reputation : 0
Language : uk
Location : Lancashire

Back to top Go down

Solved Re: java script slide show

Post by RoNo on June 1st 2010, 9:33 pm

Here you go, millers...
This is modified to work with 6 unlinked images
Code:
<center><style type="text/css">

.picshow_main { position: relative; width: 360px; height: 270px}

.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 360px; height: 270px}

.picshow_change {display:none;}

img{border:0px;}


</style>

<SCRIPT language=javascript>

 var counts = 6;

 img1 = new Image();

 img1.src = 'Your Image Url #1.png';

 img2 = new Image();

 img2.src = 'Your Image Url #2.png';

 img3 = new Image();

 img3.src = 'Your Image Url #3.png';

 img4 = new Image();

 img4.src = 'Your Image Url #4.png';

 img5 = new Image();

 img5.src = 'Your Image Url #5.png';

 img6 = new Image();

 img6.src = 'Your Image Url #6.png';
 

 var smallImg = new Array();


 alt1 = new Image();

 alt1.alt = 'Your Image Title #1';

 alt2 = new Image();

 alt2.alt = 'Your Image Title #2';

 alt3 = new Image();

 alt3.alt = 'Your Image Title #3';

 alt4 = new Image();

 alt4.alt = 'Your Image Title #4';

 alt5 = new Image();

 alt5.alt = 'Your Image Title #5';

 alt6 = new Image();

 alt6.alt = 'Your Image Title #6';

 var nn = 1;

 var key = 0;

 function change_img() {

  if (key == 0) {

  key = 1;

  } else if (document.all) {

  document.getElementById("pic").filters[0].Apply();

  document.getElementById("pic").filters[0].Play(duration = 2);

  }

  eval('document.getElementById("pic").src=img' + nn + '.src');

  eval('document.getElementById("pic").alt=alt' + nn + '.alt');

  if (nn == 1)
 
  for ( var i = 1; i <= counts; i++) {

  document.getElementById("xxjdjj" + i).className = 'axx';

  }

  document.getElementById("xxjdjj" + nn).className = 'bxx';

  nn++;

  if (nn > counts) {

  nn = 1;

  }

  tt = setTimeout('change_img()', 7000);

 }

 function changeimg(n) {

  nn = n;

  window.clearInterval(tt);

  change_img();

 }

 function ImageShow() {

  document.write('<div class="picshow_main">');

  document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');

  document.write('<div class="picshow_change">');

  for ( var i = 0; i < counts; i++) {

  document.write('<a href="javascript:changeimg(' + (i + 1)

    + ');" id="xxjdjj' + (i + 1)

    + '" class="axx" target="_self"><img src="' + smallImg[i]

    + '"></a>');

  }

  document.write('</div></div>');

  change_img();

 }

</SCRIPT>

<SCRIPT language="javascript" type="text/javascript">

 ImageShow();

</SCRIPT></center>
Edit width and height to your desired dimensions.

RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

http://bf2mercenaries.forumotion.com/

Back to top Go down

Solved Re: java script slide show

Post by millers on June 1st 2010, 10:00 pm

thanks wich one is for the width and hight beacuse there is two, is it the first one ? plus there are no numbers on it like the pick your theme one on the right >>

millers
Forumember

Male Posts : 299
Reputation : 0
Language : uk
Location : Lancashire

Back to top Go down

Solved Re: java script slide show

Post by RoNo on June 1st 2010, 11:40 pm

Edit both .picshow_main and .picshow_main .imgbig dimensions

I've added 6 image change buttons to this
Code:
<center><style type="text/css">

.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 270px}

.picshow_main { position: relative; width: 360px; height: 270px}

.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 360px; height: 270px}

.picshow_change {position: absolute; text-align: left; bottom: 0px; height: 55px; right: 0px; left: 215px;}

.picshow_change img {width:15px; height: 15px}

.picshow_change a { border: 1px solid; display: block; float: left; margin-right: 5px;  -display: inline}

a.axx { border-color: #555}

a.axx:hover {border-color: #000}

a.axx img { filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4}

a.axx:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0}

a.bxx { border-color: #000}

a.bxx:hover {border-color: #000}

img{

border:0px}


</style>

<SCRIPT language=javascript>

 var counts = 6;

 img1 = new Image();

 img1.src = 'Your Image Url #1.png';

 img2 = new Image();

 img2.src = 'Your Image Url #2.png';

 img3 = new Image();

 img3.src = 'Your Image Url #3.png';

 img4 = new Image();

 img4.src = 'Your Image Url #4.png';

 img5 = new Image();

 img5.src = 'Your Image Url #5.png';

 img6 = new Image();

 img6.src = 'Your Image Url #6.png';
 

 var smallImg = new Array();

 smallImg[0] = 'http://i69.servimg.com/u/f69/13/49/98/52/index_21.png';

 smallImg[1] = 'http://i69.servimg.com/u/f69/13/49/98/52/index_22.png';

 smallImg[2] = 'http://i69.servimg.com/u/f69/13/49/98/52/index_23.png';

 smallImg[3] = 'http://i69.servimg.com/u/f69/13/49/98/52/index_24.png';

 smallImg[4] = 'http://i69.servimg.com/u/f69/13/49/98/52/index_25.png';

 smallImg[5] = 'http://i69.servimg.com/u/f69/13/49/98/52/index_26.png';



 alt1 = new Image();

 alt1.alt = 'Your Image Title #1';

 alt2 = new Image();

 alt2.alt = 'Your Image Title #2';

 alt3 = new Image();

 alt3.alt = 'Your Image Title #3';

 alt4 = new Image();

 alt4.alt = 'Your Image Title #4';

 alt5 = new Image();

 alt5.alt = 'Your Image Title #5';

 alt6 = new Image();

 alt6.alt = 'Your Image Title #6';

 var nn = 1;

 var key = 0;

 function change_img() {

  if (key == 0) {

  key = 1;
 } else if (document.all) {

  document.getElementById("pic").filters[0].Apply();

  document.getElementById("pic").filters[0].Play(duration = 2);

  }

  eval('document.getElementById("pic").src=img' + nn + '.src');



  eval('document.getElementById("pic").alt=alt' + nn + '.alt');

  if (nn == 1) {

 
  document.getElementById("url_theme").style.cursor = ""

  }
 

  for ( var i = 1; i <= counts; i++) {

  document.getElementById("xxjdjj" + i).className = 'axx';

  }

  document.getElementById("xxjdjj" + nn).className = 'bxx';

  nn++;

  if (nn > counts) {

  nn = 1;

  }

  tt = setTimeout('change_img()', 7000);

 }

 function changeimg(n) {

  nn = n;

  window.clearInterval(tt);

  change_img();

 }

 function ImageShow() {

  document.write('<div class="picshow_main">');

  document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');

  document.write('<div class="picshow_change">');

  for ( var i = 0; i < counts; i++) {

  document.write('<a href="javascript:changeimg(' + (i + 1)

    + ');" id="xxjdjj' + (i + 1)

    + '" class="axx" target="_self"><img src="' + smallImg[i]

    + '"></a>');

  }

  document.write('</div></div>');

  change_img();

 }

</SCRIPT>

<SCRIPT language="javascript" type="text/javascript">

 ImageShow();

</SCRIPT></center>
You can change the position of those buttons
here: .picshow_change {position:

RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

http://bf2mercenaries.forumotion.com/

Back to top Go down

Solved Re: java script slide show

Post by millers on June 2nd 2010, 12:43 pm

the buttons our still not showing how come thats happend ?


edit:
i think it's just my laptop if you upload the buttons on imageshack.us it works on my laptop and my pc Smile

millers
Forumember

Male Posts : 299
Reputation : 0
Language : uk
Location : Lancashire

Back to top Go down

Solved Re: java script slide show

Post by RoNo on June 2nd 2010, 7:40 pm


RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

http://bf2mercenaries.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum