No announcement yet.

thickbox and javascript

  • Filter
  • Time
  • Show
Clear All
new posts

  • thickbox and javascript

    I just made a store on 3dcart a month ago and have looked over this forum, almost daily. Now I have a question.
    I'm making a page on my site that will be information about the gems I sell, it's basically a gallery of gems with text.
    Right now I have 2 pictures up on the last one, in the real version I will have 3-5 pictures for each one. so right now I'm using a blank page to show the pictures, which works, but isn't pretty!
    So I was wondering if anyone knew if you can set up thickbox on 3dcart. here is an example of thickbox.
    I was wondering if anyone knew how to implement that (I realize I'd need to install java-script libraries to 3dcart)
    or maybe a way to do this with some HTML?
    I'm really not sure if this is possible.
    Thanks for the help!

  • #2
    bad link

    The first link I give on my post is wrong here it it is correct:


    • #3
      I haven't heard of thickbox but looking at the site you referenced there doesn't appear to me to be any reason why not. The installation seems very straightforward. I am not currently at that stage in the setup of my site but when I get there I will try it and if successful will let you know.



      • #4
        I am also interested in knowing if thickbox can be set up. I attempted setting it up but couldn't get it to work. I was actually trying to get it to work on a select few product listing pages. At anyrate, I definitely could have done something wrong.


        • #5
          Ok I finally got around to looking at this and it works great with 3d. Follow the instructions in the link in the first post then you'll have to tweek the code in your listing page to bypass 3d's image zoom function. If you want to see it in action my site is a work-in-progress so there are only a few low-res product images but you'll get the idea....

          For best results look at products with really big product images for example
          • Candy->Licorice->Sour Punch SipNChew Straws
          • Salty Snacks->Meat Snacks->Trail's Best Smoked Beef

          Let me if you have any questions, Steve


          • #6
            how did you install the javascript directories?


            • #7
              I put the javascript directories off of assets. Here's a step by step narration:

              1. Create a folder for your custom script. I called mine "assets/js". Download the 2 script files from the thickbox site and put them into this folder (jquery.js and thickbox.js).

              2. Add the references to the 2 script files at the top of the html file that will be displaying the images, in my case Listing_0.html:

              <script type="text/javascript" src="assets/js/jquery.js"></script>
              <script type="text/javascript" src="assets/js/thickbox.js"></script>
              3. Download the stylesheet thickbox.css and put it somewhere just like you did in step 1. In my case I put it into assets/templates/layout1/css.

              4. Add a Link element to the Head section of your Frame.html to pull in the thickbox.css from the folder you used in step 3.

              <LINK REL="StyleSheet" HREF="assets/templates/[template]/css/thickbox.css" TYPE="text/css" MEDIA="screen">
              5. Download the png file and put it in a folder on your site. Change the path in thickbox.css line 37 to point to this location:

              .TB_overlayMacFFBGHack {background: url(assets/images/macFFBgHack.png) repeat;}
              6. Wrap the image you want thickboxed with an anchor tag that uses the css class "thickbox", this will cause the effect when the user clicks on the image. In my case I modified the default code in Listing_0 to this:

              <a href="[image1]" title="[imagecaption1]" class="thickbox"><img src="thumbnail.asp?file=[image1]&maxx=300&maxy=250" align="middle" border="0" id="large" name="large" alt="[name]"></a>
              The other thing I did was force 3dCart to render the image slight smaller than the actual image. Notice in the line above the displayed image size if 300 x 250px. So if the source image is say, 600 x 500px the effect will be a zoom in. If you don't want 3d reducing the image for you the only other way I found to do it was to put the larger, zoomed image in one of the image2, image3, etc. fields then reference that variable.