Magento Forum

   
need help adding a 942x 90 javascript image scroller on modern theme homepage ??? 
 
jasonr704
Jr. Member
 
Total Posts:  5
Joined:  2008-07-04
 

Can anybody please help me work out how to add this horizontal image scroller above the home-co-bottom.gif image in the modern theme?

The script I’d like to use can be seen below or at: http://www.benjaminkeen.com/software/image_scroller/
All instructions and code for the script are shown below.... I just need some help placing it in the right places.
(all javascript script source files are in the zip file too)

Current Modern homepage sample.phtml code?

<div style="width:653px; float:left;">
  <
img src="<?php echo $this->getSkinUrl('images/media/home_co_main.jpg');?>" alt="" style="display:block;" /></div>
<
div style="width:280px; float:right;">
  <
img src="<?php echo $this->getSkinUrl('images/media/home_co_tr.gif');?>" alt="" style="display:block; margin-bottom:10px;" />
------>
Want to insert image Scroller above the below image<---------------  
<
img src="<?php echo $this->getSkinUrl('images/media/home_co_br.gif');?>" alt="" style="display:block;" />
</
div>
<
div class="clear"></div>
<
img src="<?php echo $this->getSkinUrl('images/media/home_co_bottom.gif');?>" alt="" style="margin-top:10px; display:block;" />

where do I then place this code for the scroller?:

1. Import swfobject.js and scroller_x.swf

From the downloadable zipfile
extract the swfobject.js and scroller_x.wsf files and upload them to the same folder as the webpage to which you're adding the image scroller. Note: you can actually place it wherever you want, but the sake of simplicity we're going to assume it's in the same folder.
---> I actually set up a file folder at /public/app/design/frontend/default/modern/scroller <--

2. Set up your scroller
In between the <head> ... </head> tags of your page, import the javascript library:

      <script type="text/javascript" src="swfobject.js"></script>
Next, add the following chunk of HTML and JavaScript into the place in your page where you would like the image scroller to appear.
----------> Where do I place this in magento files?<------------------

      <div id="scroller1" style="width:600px; height: 66px;">
        Your browser is not able to run this Flash script.<br />
        <br />
        Requirements: <br />
        - JavaScript must be enabled<br />
        - You must have Flash installed<br />
 
        <script type="text/javascript">
        var so3 = new SWFObject("scroller_x.swf", "scroller1", "100%", "66", "8");
        
        so3.addVariable("sourceFile", "my_thumb_info.txt");
        so3.addVariable("fileType", "text");
        so3.addVariable("scrollSpeed", "10");
        so3.addVariable("stageWidth", "600");
        so3.addVariable("stageHeight", "66");
        so3.addVariable("thumbSize", "60");
        so3.addVariable("bgColor", "666666");
        so3.addVariable("navColor", "333333");
  
        so3.write("scroller1");
        </script>
      </div>

3. Now tweak that code to fit for whatever settings you want: your thumbnail size, the scroller width and height and the background and nav bar colours. It may take a little back-and-forth to get the scroller looking the way you want it. Take a look here for a full list of the available configuration options.


4. Create your thumbnail source file (not sure where to put this in magento'
s file structure?)

This will be the trickiest part 
for non-technical usersBasicallyyour job is to create a file that contains the information (thumbnailscaptions and other) to funnel into the image scrollerThis can be created in two different formatsdepending on your preferencea query string file, or an XML file.

aCreate a query string file:

&
thumbURL1;=http://yoursite.com/path/to/th_img1.jpg&title1;=My Caption 1&target1;=_blank&linkURL1;=http://yoursite.com/path/to/img1.jpg&
&thumbURL2;=http://yoursite.com/path/to/th_img2.jpg&title2;=My Caption 2&target2;=_blank&linkURL2;=http://yoursite.com/path/to/img2.jpg&
&thumbURL3;=http://yoursite.com/path/to/th_img3.jpg&title3;=My Caption 3&target3;=_blank&linkURL3;=http://yoursite.com/path/to/img3.jpg&
&thumbURL4;=http://yoursite.com/path/to/th_img4.jpg&title4;=My Caption 4&target4;=_blank&linkURL4;=http://yoursite.com/path/to/img4.jpg&
&thumbURL5;=http://yoursite.com/path/to/th_img5.jpg&title5;=My Caption 5&target5;=_blank&linkURL5;=http://yoursite.com/path/to/img5.jpg&
The required sections are in redThe optional sections are in green. As you can see from a glanceonly the thumbnail URL is requiredThe caption (titleX), target (e.g_blank for new windowthe parent window or the name of a frameetc.) and link URL (where to link to when the user clicks the thumbnailare all optional.

Make sure you end every line with an character.

bThe create an XML file:

Your XML file should have the following structure:

<?xml version="1.0" encoding="UTF-8"?>
 
<items>
  <
item>
    <
thumbURL></thumbURL>
    <
linkURL></linkURL>
    <
caption></caption>
    <
target></target>
  </
item>
  <
item>
    <
thumbURL></thumbURL>
    <
linkURL></linkURL>
    <
caption></caption>
    <
target></target>
  </
item>
</
items
The order of the item nodes are not important, and within the item nodesonly the thumbURL node is required.

When you have created your fileupload it to your folder on your server and call it my_thumb_info.txt or whatever you specified in the code in your page. (Not sure where these files go in magento?) Now refresh your page in your browser - if all went well you should see your populated image scroller!

Thanks for any help!!!!

File Attachments
image_scroller1_7.zip  (File Size: 45KB - Downloads: 130)
 
Magento Community Magento Community
Magento Community
Magento Community
 
harry12bar
Sr. Member
 
Avatar
Total Posts:  168
Joined:  2008-01-07
 

Hi, this is a shot in the dark (from a none coder) . I would imagine one of the front page product display scripts, found in forum, less prices or whatever. I think you could work around with that.. Just call in image from it and insert your script onto the same page.
Use maybe : Featured products (with attributes) . You’ll have to hunt the scripts , there are loads on this forum. Look at featured.phtml or featured.php. I ve used javascripts in odd places, with success so I would imagine The yoda coders will get through this with some ease. wink

Just a thought.  (maybe useless)

When I get time i’ll have a go with your script.

Good luck.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top