Announcement

Collapse
No announcement yet.

Product List Rollover Variable?

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

    Product List Rollover Variable?

    Hi, having trouble with changing the product lists so that when the user mouses over a product image it changes to an alternative image of the same size, and on click takes the user to the extended info page as usual.

    Poked around the forums earlier for an answer to this (this thread seems to tackle something similar: http://community.actinic.com/showthr...llover+product) but the answers are for the 2005 version and I am completely lost on version 10 of actinic, not to mention not really a programmer.

    Could someone please help a little by clarifying how works and where to put it? Or offer an alternative suggestion? I've thought about doing the whole thing with CSS sprites but that would mean editing a considerable amount of images.

    Thanks for any help or clarity anyone can offer.

    #2
    It might be easier to use Drillpine Multi Product Images plugin to show thumbnails so people know there are different images and then put a link around the main product image to the extended information page.
    Peblaco

    Comment


      #3
      Originally posted by peblaco View Post
      It might be easier to use Drillpine Multi Product Images plugin to show thumbnails so people know there are different images and then put a link around the main product image to the extended information page.

      Hi Peblaco, thanks allot for you advice

      Sorry if I was a little unclear, it is the image on our product listing pages that needs to change, the extended information page is fine. Management also has decided that they will not pay for plugins, (it would have been nice to be able to contact drillpine and ask them about customisation) so I need to code it in.

      From the stuff in the thread I mentioned, I think I can get it to work if I can figure out where the second bit of code goes in version 10 of actinic, unfortunately I have no idea where that is.

      Comment


        #4
        The link you gave is still relevant in v10.

        But, to begin, you need to 'design' your 'Standard Layout Using CSS' (or whatever layout you use) and look for the code that currently displays the image. Something like...

        Code:
        block if
        	<img src="ProductThumbnailImageFileName" alt="ProductName" title="ProductName" align="left" />
        /block
        and change it to something like...


        Code:
        block if
        	<img src="ProductThumbnailImageFileName" alt="ProductName" title="ProductName" align="left" />
        /block
        block if
        	<img src="ProductThumbnailImageFileName2" alt="ProductName" title="ProductName" align="left" />
        /block
        You'll have to create a new variable called ProductThumbnailImageFileName2 and put the second thumbnail url into it for the product, but that code should then show the second thumbnail below the first one. Also remember to change the block-if check to check against ProductThumbnailImageFileName2.

        In the same area, you should also put a similar check in to display the larger product image. Once you've got all 3 images showing in your design, you can do the next bit and get the rollovers working.

        Comment


          #5
          Add this to your Standard Product Image layout's <img ...> tag:
          Code:
          	<actinic:block if="%3cactinic%3avariable%20name%3d%22SecondImage%22%20%2f%3e%20%21%3d%20%22%22">
          		onmouseover="pimg=this.src;this.src='<actinic:block php="true">echo str_replace ( '\\', '/', '<actinic:variable name="SecondImage" encoding="perl" selectable="false" />');</actinic:block>'"
          		onmouseout="this.src=pimg"
          	</actinic:block>
          Assumes a user variable SecondImage of type filename for this image.
          Norman - www.drillpine.biz
          Edinburgh, U K / Bitez, Turkey

          Comment


            #6
            Okay, figured this out ^^ not uploaded yet but its shiney in preview. Method as best as i can explain it is below for anyone who needs help with this in future.

            -In the layout code for the standard product image find a chunk of code, possibly somewhere near the middle, that reads something like this:

            Code:
            <img src="<actinic:variable name="ProductImageFileName" />"
                  border="0"
                  width="<actinic:variable name="ProductImageWidth" />"
                  height="<actinic:variable name="ProductImageHeight" />"
                  alt="<actinic:variable name="ProductName" encoding="strip"/>"/>
            Thats the code we need to change. first however we need to make a custom variable to put the rollover image in.

            -Go to design>library>variables> then right click on product and then new variable. Name it LargeImage. Enter some text in the Prompt box that will remind you that this is the rollover image. Check "product" in the place of setting list. Next there should be a drop down box called "Type:", you need to select "filename". Also make sure that "allow empty value" is checked.

            -Now you will find an option under "properties" in the product details panel where you can add your rollover images. this of course needs to be done for each product.

            So we have the variable telling actinic we want rollover images, and we have told it the images we want. now we need to tell it how it works. be careful of the variable names in the code below, they may be different in different designs.

            this will be our new code in a moment:
            Code:
            <actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e" >
            <a href="<actinic:variable name="ExtendedInfoPageName" />" onMouseOver="SwapImage('<actinic:variable name="ProductImageFileName" />','<actinic:variable name="LargeImage" />')"
            	onMouseOut="RestoreImage()">
            <img src="<actinic:variable name="ProductImageFileName" />"
                  border="0"
                  width="<actinic:variable name="ProductImageWidth" />"
                  height="<actinic:variable name="ProductImageHeight" />"
                  alt="<actinic:variable name="ProductName" encoding="strip"/>"
            		name="<actinic:variable name="ProductImageFileName" />"/>
            		</a>
            </actinic:block>
            -In the second last line there, we have added a name to the image we want to swap out, which should be the same variable as the image file name... so we used the "ProductImageFileName" variable in this case.

            -Also see how we have added an anchor tag around the original bit of code? The tag firstly tells the rollover image to link to the extended info page, then to swap the image that we just named, with the variable that we created earlier, and then to swap it back to the image we have named above after.

            Be careful that all of these variables match those that you are using and in the correct order, and it should work fine.

            EDIT: Thanks norman, didn't get your message till after I had posted this. I think I read something similar in the previous thread and still don't understand quite where that goes. The method above seems to work fine though, even if it is a little more long winded.

            Comment


              #7
              My way (post #6) is much cleaner. I've also added in some tweaks that make it safe when your extra images are outside the Site folder. And a blockif so no code is generated if the extra image doesn't exist.
              Norman - www.drillpine.biz
              Edinburgh, U K / Bitez, Turkey

              Comment


                #8
                Allen,

                Your method isn't general purpose (others may try to use it and have errors).

                1) It will always try to load an extended info page, even if it doesn't exist.

                2) It will always try to swap images, even if you don't have an additional one defined.

                3) It will fail if you have images in certain sub/folders beginning with certain letters. E.g. \new Images\newfile
                (Actinic will put backslashes into your filenames as the folder delimiters and this may look like JavaScript escaped characters in your code - the \n becoming newline in the example).

                My way leaves the product image code exactly as standard unless the extra image is defined. Only then is the mouseover code generated. Extended info code works as usual.
                Norman - www.drillpine.biz
                Edinburgh, U K / Bitez, Turkey

                Comment


                  #9
                  Due to our site design we shouldn't have any of those problems.
                  Would I be correct in saying that the steps are the same but the code you have given is slighty different?

                  Comment


                    #10
                    My code enhances the Standard Product Image layout to give it the functionality you asked for in your first post. It works without needing to wrap an extra anchor tag around the image and is thus a bit smaller and more efficient.

                    As I mentioned, it allows the Extended Info to be optional, allows the extra image to be optional and won't suffer from the sub-folder first letter sensitivity bug that your code does.
                    Norman - www.drillpine.biz
                    Edinburgh, U K / Bitez, Turkey

                    Comment


                      #11
                      Was asking so I could make sure it went in the right way, not debating that yours is better, so I'll take that as a mostly yes.
                      Thanks for pointing out bugs and your help!

                      Comment

                      Working...
                      X