Sliding Banner Management Code for the opencart.

Click to Download Rupak Slider Banner Management of Opencart

From the downloaded file extract the file with WinRAR archiver and you will be able to get the zip file extracted and then follow the following steps:

Copy and paste the files in their respective folders.

====================================================

Paste the following
<li><a href="<?php echo HTTPS_SERVER . 'index.php?route=catalog/banner&token=' . $this->session->data['token']; ?>">Banner Management</a></li>
in the admin\view\template\common\header.tpl
below these lines



<li id="catalog"><a class="top"><?php echo $text_catalog; ?></a>

<ul>

<li><a href="<?php echo $category; ?>"><?php echo $text_category; ?></a></li>

<li><a href="<?php echo $product; ?>"><?php echo $text_product; ?></a></li>

<li><a href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li>

<li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>

<li><a href="<?php echo $review; ?>"><?php echo $text_review; ?></a></li>

<li><a href="<?php echo $information; ?>"><?php echo $text_information; ?></a></li>
======================================================
Run the Sql in the "Sql for the database.txt" onto your database.
======================================================
Now open in the browser login in the admin
Give permission to the user (You can set the permission by admin only) for catalog/banner
admin>> System>> Users>> User Groups>> Then select the user and click edit and check the caralog/banner on both the access permission and the modify


permission


======================================================
After that click on the Catalog >> Banner Managment
======================================================
Copy the below code on which you want to show the banner changing

======================================================


<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/slider.css">

<script type="text/javascript" src="catalog/view/theme/default/js/easySlider1.7.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#slider").easySlider({

auto: true,

continuous: true,

numeric: true

});

});

</script>




<script type="text/javascript">

function slideSwitch() {

var $active = $('#slideshow IMG.active');



if ( $active.length == 0 ) $active = $('#slideshow IMG:last');



// use this to pull the images in the order they appear in the markup

var $next = $active.next().length ? $active.next()

: $('#slideshow IMG:first');

$active.addClass('last-active');



$next.css({opacity: 0.0})

.addClass('active')

.animate({opacity: 1.0}, 1000, function() {

$active.removeClass('active last-active');

});

}



$(function() {

setInterval( "slideSwitch()", 5000 );

});



</script>
<div id="slider">

<ul>

<?php

$result = mysql_query("SELECT * FROM banner b inner join banner_description bd on bd.banner_id=b.banner_id ");

$i=0;

while($row = mysql_fetch_array($result))

{



?>

<li>

<a href="<?php echo $row['link']; ?>">

<img src="image/<?php echo $row['image']; ?>" alt="" title="<?php echo $row['description']; ?>"/>

</a>

</li>

<?php $i++; }

?>

</ul>

</div>
======================================================

Workout with the css so that you can make as per your choice