Announcement

Collapse
No announcement yet.

Random Image when new page opens ...

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Random Image when new page opens ...

    When I open a page each time/refresh I would like an image to be different.
    I know how to set up a CUSTOMVAR, etc but only with a static image.

    I want the image to be static, i.e. not flash etc but i want the image to select from a list of images.

    How is this done ?

    Simon.
    esafetysigns.co.uk
    your instant download portal for self printable health and safety signs and posters
    ... download once use as many times as you like !


    http://www.esafetysigns.co.uk/index.html
    http://www.esafetysigns.co.uk/acatalog/index.html

    #2
    how good is your coding? know any js/php etc. etc?.. am thinking that this Q is starting to fall outside the realm of actinic v7 support

    Comment


      #3
      Do a www search for random image javascripts to incorporate into the actinic template.

      When you find a script you will have to put the bit that needs to be in the <HEAD> tag in act_primary, and the rest will go into the template that will display the random image

      Comment


        #4
        Got one .....

        Thanks got some code, I am not a JS writer but will have a go using the supplied setup instructions.

        May need some Actinic integration help. Watch this space ?

        Thanks, Simon.
        P.S. Stupid question, all of the images in my rota wont load together will they ? Page size would be huge ?
        esafetysigns.co.uk
        your instant download portal for self printable health and safety signs and posters
        ... download once use as many times as you like !


        http://www.esafetysigns.co.uk/index.html
        http://www.esafetysigns.co.uk/acatalog/index.html

        Comment


          #5
          Depends on the code you use and how clever it is - some scripts use an external file for the images and call in at random - most of the newer codes should be fine as they are now optimised


          Bikster
          SellerDeck Designs and Responsive Themes

          Comment


            #6
            I have been trying to use this bit of code but the 2 images i have created never appear (have added to additional files)

            <script language=JavaScript>
            document.write('<img width=468 height=60 src="fdjad' + (Math.floor(Math.random()*2 - 0.01) + 1) + '.gif">');
            </script>

            Any obvious errors?

            Steven

            Comment


              #7
              Try
              Code:
              <script language=JavaScript>
              document.write('<img width=468 height=60 src="image' + Math.floor(Math.random()*(X-1)) + '.gif">');
              </script>
              This assumes your images are called image1, image2 etc. Replace X with the total number of images you have to display. Also, may seem obvious but make sure the images are in the acatalog directory.
              www.gbradley.co.uk
              Web Development, Actinic Patches, Scripts & more

              Comment


                #8
                And (this must be the 500th time I've typed this) for JavaScript testing view the page in Firefox and use its Tools / JavaScript Console to get decent diagnostics.
                Norman - www.drillpine.biz
                Edinburgh, U K / Bitez, Turkey

                Comment


                  #9
                  Originally posted by NormanRouxel
                  (this must be the 500th time I've typed this)
                  Add it into your signature and spend quality time instead down the pub


                  Bikster
                  SellerDeck Designs and Responsive Themes

                  Comment


                    #10
                    Here's an (untested) idea where you can keep 10 images in Custom Properties. This way you maintain the list of Custom Properties (in Design / Options / Site Defaults) and check "Is File Name" and Actinic will upload and maintain changes for you.
                    Code:
                    <script language=JavaScript>
                    <!--
                    var images=new Array('CUSTOMVAR:IMAGE1','CUSTOMVAR:IMAGE2','CUSTOMVAR:IMAGE3','CUSTOMVAR:IMAGE4','CUSTOMVAR:IMAGE5',
                                         'CUSTOMVAR:IMAGE6','CUSTOMVAR:IMAGE7','CUSTOMVAR:IMAGE8','CUSTOMVAR:IMAGE9','CUSTOMVAR:IMAGE10');
                    document.write('<img width=468 height=60 src="' + images[Math.floor(Math.random()*images.length - 0.01)] + '">');
                    //-->
                    </script>
                    This would also allow you to have a different set of images on different pages by changing these properties for the Section.
                    Norman - www.drillpine.biz
                    Edinburgh, U K / Bitez, Turkey

                    Comment


                      #11
                      Jont. That's an idea! At least mozilla.org saved me some typing when they moved that feature from Tools / Web Development / JavaScript Console, to one level up.
                      Norman - www.drillpine.biz
                      Edinburgh, U K / Bitez, Turkey

                      Comment


                        #12
                        Is there a problem when you have more that one script in the same table.

                        I have the following (using original code I posted as this DOES work eleswhere in the site0

                        <table width="800" height="74" border="0" cellpadding="0" cellspacing="0" background="banner_header.gif">
                        <tr>
                        <td width="200">&nbsp;&nbsp;&nbsp;&nbsp;<IMG SRC="logo_fdj.gif" ALT="Fidelity DJ" BORDER=0 HEIGHT=50 WIDTH=183 >
                        </td>
                        <td width="489"><script language=JavaScript>
                        document.write('<img width=468 height=60 src="waxlogo' + (Math.floor(Math.random()*5 - 0.01) + 1) + '.gif">');
                        </script></td>
                        <td width="70"><div align="right">
                        <table width="87" height="70" border="0" align="right" cellpadding="5" cellspacing="5">
                        <tr>
                        <td bgcolor="#FFFFFF"><div align="right"><span class="actxxsmall">
                        <font color="#000033">
                        <script language="JavaScript">
                        document.write("Items:&nbsp;" + getCartItem(3)+"<BR>");
                        document.write("Value:&nbsp;" + getCartItem(1));
                        </script>
                        </font></span></div></td>
                        </tr>
                        </table>
                        </div></td>
                        </tr>
                        </table>
                        The waxlogo images appear elsewhere on my site but not in the home page.

                        Any thoughts

                        Steven

                        Comment


                          #13
                          That would probably be because the images are stored in the /acatalog/ directory?

                          Mike
                          -----------------------------------------

                          First Tackle - Fly Fishing and Game Angling

                          -----------------------------------------

                          Comment


                            #14
                            Got you. Still not sure how it works on the other pages, guess I have images saved in more than one place. Works now.

                            Should have asked at the start, but can these images have links to unique pages?

                            Steven

                            Comment


                              #15
                              This is what I wrote for displaying random banner ads. It allows you to specify images, if they should be a link, ALT text for the image and if it is a link, if the page should open in a new window.

                              Code:
                              <script type="text/javascript">
                              function banner(){
                              var banner=new Array();
                              var link=new Array();
                              var alt=new Array();
                              var win=new Array();
                              
                              banner[banner.length]="freeshipping.jpg";
                              link[link.length]="";
                              alt[alt.length]="ALT text for shipping image";
                              win[win.length]=false;
                              
                              banner[banner.length]="offer.jpg";
                              link[link.length]="http://www.mysite.com/offer.htm";
                              alt[alt.length]="ALT text for offer image";
                              win[win.length]=true;
                              
                              var num=Math.floor(Math.random()*(banner.length))
                              if (link[num]){
                              	str="<a href=\""+link[num]+"\"";
                              	if (win[num]){
                              		str+=" target=\"blank\"";
                              		}
                              	str+="><img src=\"http://www.diskdepot.co.uk/acatalog/banners/"+banner[num]+"\" border=\"0\" alt=\""+alt[num]+"\" />";
                              	}
                              else{
                              	str="<img src=\"http://www.diskdepot.co.uk/acatalog/banners/"+banner[num]+"\" border=\"0\" alt=\""+alt[num]+"\" />";
                              	}
                              return(str);
                              }
                              </script>
                              Place this inside the <HEAD> portion of your primary template. Then, wherever you want the image to appear, just insert

                              Code:
                              <script type="text/javascript">
                              document.write(banner());
                              </script>
                              This example has 2 images to choose from. The first is just a plain image with ALT text, and the second is a clickable image with alt text that opens in a new window. You can add as many images as you like by copying the 4 lines for each image.
                              www.gbradley.co.uk
                              Web Development, Actinic Patches, Scripts & more

                              Comment

                              Working...
                              X