Tag Archives: infobox feature

how to add a linked image to an infobox

You want to advertise a new product or special shipping offer with an image in one of the side columns of your store. And you would like to make it a clickable link to another page. Here’s how:

1. First prepare the image. Consider the width of the column it is going to be inserted into. If the image is wider than the column, it’ll push out into the mainpage area. Upload the image to the folder /images.
2. Open up the example.php infobox file. In Cre Loaded you can find this in /templates/default/boxes. The code looks like this:

<!-- example //-->
<tr>
  <td>
  <?php
  $info_box_contents = array();
  $info_box_contents[] = array('align' => 'left',
                               'text'  => '<font color="' . $font_color . '">' . BOX_HEADING_EXAMPLE . '</font>');
  // Change BOX_HEADING_EXAMPLE to a name of your choice. Use the same in Infobox Admin to configure the infobox title.
  new $infobox_template_heading($info_box_contents, '', ((isset($column_location) && $column_location !='') ? $column_location : '') ); 
  $info_box_contents = array();
  // add your infobox content to the text variable below  
  $info_box_contents[] = array('align' => 'center',
                               'text'  => '<a href="http://www.google.com">' . tep_image(DIR_WS_IMAGES . 'Book-4_mockup.jpg', 'my image', SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>');
  new $infobox_template($info_box_contents, true, true, ((isset($column_location) && $column_location !='') ? $column_location : '') );
  if (TEMPLATE_INCLUDE_FOOTER =='true'){
    $info_box_contents = array();
    $info_box_contents[] = array('align' => 'left',
                                 'text'  => tep_draw_separator('pixel_trans.gif', '100%', '1')
                                );
    new $infobox_template_footer($info_box_contents, ((isset($column_location) && $column_location !='') ? $column_location : '') );
  } 
  ?>
  </td>
</tr>

3. Edit the content line. Find in the code the comment // add your infobox content to the text variable below and below this edit the ‘text’ as shown in the following example, replacing the image link, name and title with your details:

$info_box_contents[] = array('align' => 'left',
'text'  => '<a href="http://www.linktowhereveryouwanttogo.com">' . tep_image(DIR_WS_IMAGES . 'name_of_my_image.jpg', 'my image title', SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>');

4. Save the example.php file and add the infobox to the template in the usual way.

free smooth javascript scroller for the bestsellers scroll infobox

The HTML ‘marquee’ tag is used to make the product images scroll vertically in the bestsellers_scroll infobox. It works, but creates a choppy display (as this horizontal example of the tag shows):

Hello! This is an example of a horizontal marquee plus image marquee scroll effect using wordpress icon

—————————————————————————————————————

The following code is for a vertical scroll effect that is much smoother. There are some user editable settings in the jscript file defining delay, speed and mouse over actions. Colours are set in the #marqueecontainer css script.

This is a fairly easy mod to do – 1 new file, 3 small modifications to existing files.

Create this new file from the code below: /includes/javascript/marquee.js

<?php
/*
  $Id: marquee.js
*/
?>
/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=500 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee

Add this line into: /templates/your template/mainpage.tpl.php

<script type="text/javascript" src="<?php echo DIR_WS_JAVASCRIPT;?>marquee.js"></script>
</head>

Modify your file: templates/your template/boxes/best_sellers_scroll.php

$info_box_contents[] = array('align' => 'center',
                             'text' => '<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"><div id="vmarquee" style="position: absolute; width: 98%;">' . $bestsellers_list . '</div></div>');
      new $infobox_template($info_box_contents, true, true, $column_location);

Add this at the end of the file: template/your template/stylesheet.css

#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 100px; /*marquee height */
background-color: white;
overflow: hidden;
border: 1px solid orange;
padding: 2px;
padding-left: 4px;
}