| Author |
 Topic  |
barrysmith
Ecommerce Template Guru
United Kingdom
3349 Posts Pre-sales questions only
(More Details...)
|
 Posted - 06/30/2011 : 20:19
|
I could just imagine one of the issues for some guys who do not understand HTML and CSS is how to edit and setup a rotating banner for your home page. Well I have the answer.
Use your content regions.
Here is how.
Create 5 new Blank Content Regions in your store admin
This will go on your page where you want the banner to appear - Replace Region ID with your Store Admin Region ID's
quote:
<div class="rotator">
<ul>
<li class="show"><% regionid=1 %><!--#include file="vsadmin/inc/inccontentregion.asp"--></li>
<li><% regionid=2 %><!--#include file="vsadmin/inc/inccontentregion.asp"--></li>
<li><% regionid=3 %><!--#include file="vsadmin/inc/inccontentregion.asp"--></li>
<li><% regionid=4 %><!--#include file="vsadmin/inc/inccontentregion.asp"--></li>
<li><% regionid=5 %><!--#include file="vsadmin/inc/inccontentregion.asp"--></li>
</ul>
</div>
Next you will need to add images to your admin regions. Remember that all your images need to be the same dimensions. My examples here below also show a link, so you can link to a section or just remove the link
quote:
Region 1
<a href="#link-to-prod"><img src="images/banner1.jpg" width="950" height="237" alt="Alternate Text" /></a>
Region 2
<a href="#link-to-prod"><img src="images/banner2.jpg" width="950" height="237" alt="Alternate Text" /></a>
Region 1
<a href="#link-to-prod"><img src="images/banner3.jpg" width="950" height="237" alt="Alternate Text" /></a>
Region 3
<a href="#link-to-prod"><img src="images/banner4.jpg" width="950" height="237" alt="Alternate Text" /></a>
Region 5
<a href="#link-to-prod"><img src="images/banner5.jpg" width="950" height="237" alt="Alternate Text" /></a>
Do not foget to edit the style sheet to match the dimenions of your image.
div.rotator {
position: relative;
height: 237px;
display: none;
width: 950px;
}
Next you will need to download these files and add this to your head section of the page(s) you want the banner to appear on.
http://www.w3designs.co.uk/ectimages/rotating-banner.zip (unzip and add the files to root level)
quote:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="rotating-banner.js"></script>
<link href="rotating-banner.css" rel="stylesheet" type="text/css">
As easy as that and now every time you want to change one of the banner images you can use your store admin to upload a new image, please let me know how you get on and if you need help let me know.
Kind Regards
Barry Smith
*** ECT Featured Website Designer
*** ECT Design Related Services
*** Expression Web
*** CSS Designer
[url="http://www.w3designs.co.uk"]ECT Website Designer (w3designs)[/url]
http://www.w3designs.co.uk (ECT Website Designer)
http://www.supersupporter.co.za - Community Forum for Real Sports Fans |
Edited by - barrysmith on 06/30/2011 20:38 |
|
sharonchinn
New Member
USA
68 Posts |
Posted - 07/06/2011 : 18:38
|
After getting into this, I realize it's written for asp format. Do you have a php version? Could I use it to float a banner over the top left of my page logo that alternated two different images... i.e.,
Rewards
Earn 1 point for each $1 spent
then
Rewards
Redeemable on next purchase
with a link to a rewards.php page that explains the Rewards program.
Sharon
|
 |
|
threecrow
Ecommerce Template Expert
USA
734 Posts |
|
sharonchinn
New Member
USA
68 Posts |
Posted - 07/06/2011 : 20:37
|
Duh! I should have thought of that. I use dynamicdrive in my current store to show a slide show of images within the product description. My way around the old oscommerce inability to have multiple product images.
Thanks!
Sharon |
|
|
barrysmith
Ecommerce Template Guru
United Kingdom
3349 Posts Pre-sales questions only
(More Details...)
|
Posted - 07/08/2011 : 04:04
|
The point of this exercise is to have a scrolling banner, but then instaed of working in html, you can use content regions to replace images.
All you need to do is replace the asp content region with the php equivalent.
Kind Regards
Barry Smith
*** ECT Featured Website Designer
*** ECT Design Related Services
*** Expression Web
*** CSS Designer
[url="http://www.w3designs.co.uk"]ECT Website Designer (w3designs)[/url]
http://www.w3designs.co.uk (ECT Website Designer)
http://www.supersupporter.co.za - Community Forum for Real Sports Fans |
|
|
knoterman
Advanced Member
162 Posts Pre-sales questions only
(More Details...)
|
Posted - 12/13/2011 : 14:58
|
Hi,
I would really like to add a rotating show to my index / home page. I'm looking at the directions, but there are a few foggy areas for the beginner :) First, I've found the admin region on my control panel page, but exactly what do we add and how many times? Do we cut and paste that hole line of code x 5? I'm thinking our store name goes where "inccontentregion" goes? How do you add images to your admin region? Can you break down the steps just a little bit more please. I'd really like to learn how to do this, but I'm a bit lost. Thanks!
Is there a way you can do a visual and post the link. Those are SOOOO helpful when you can see in a video how it's done. |
|
|
deanhoyt
Advanced Member
USA
301 Posts |
|
knoterman
Advanced Member
162 Posts Pre-sales questions only
(More Details...)
|
Posted - 12/13/2011 : 16:08
|
I saw how he did that...but how does that apply to a slide show? I don't want to remove all the other context, just add it to the page. Are the lines of code provided the actual code that needs to be copied/ pasted or are there things that need to be changed?
Thanks |
|
|
deanhoyt
Advanced Member
USA
301 Posts |
Posted - 12/13/2011 : 16:43
|
Each CMS Region is a "slide".
This is what you add to the page where you want the slide show:
<div class="rotator">
<ul>
<li class="show"><% regionid=1 %><!--#include file="vsadmin/inc/inccontentregion.asp"--></li>
<li><% regionid=2 %><!--#include file="vsadmin/inc/inccontentregion.asp"--></li>
<li><% regionid=3 %><!--#include file="vsadmin/inc/inccontentregion.asp"--></li>
<li><% regionid=4 %><!--#include file="vsadmin/inc/inccontentregion.asp"--></li>
<li><% regionid=5 %><!--#include file="vsadmin/inc/inccontentregion.asp"--></li>
</ul>
</div>
Add this before the </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="rotating-banner.js"></script>
<link href="rotating-banner.css" rel="stylesheet" type="text/css">
Then edit the css file to include:
div.rotator {
position: relative;
height: 237px;
display: none;
width: 950px;
}
The height and width should match your images if that is what you are using.
Now you have to create each CMS region.
Your CMS region can be an image, text or both.
Dean
http://www.stxop.com |
|
|
knoterman
Advanced Member
162 Posts Pre-sales questions only
(More Details...)
|
Posted - 12/13/2011 : 16:51
|
OK, I followed the turtorial video but it just added the picture text to my website homepage (www.naturalinspirationsparrotcages.com). how do I add the pictures?
I also unzipped the rotating banner css:
/* rotator in-page placement */
div.rotator {
position: relative;
height: 237px;
display: none;
width: 950px;
}
/* rotator css */
div.rotator ul li {
float:left;
position:absolute;
list-style: none;
}
div.rotator ul {
margin:0px;
padding:0px
}
/* rotator image style */
div.rotator ul li img {
margin: 0px;
padding: 0px;
background: #FFF;
}
div.rotator ul li.show {
z-index:500
}
What do I do with it? The other file java script wouldn't open?
Thanks |
|
|
knoterman
Advanced Member
162 Posts Pre-sales questions only
(More Details...)
|
Posted - 12/14/2011 : 12:48
|
How do you get a picture to show up instead of the picture text location? The buttons on the video don't show up on the top of my 'box' in the content area (like the source and formatting buttons). Also, what do I do with the root code? Java script wouldn't open.
Thanks, |
|
|
deanhoyt
Advanced Member
USA
301 Posts |
Posted - 12/14/2011 : 14:43
|
When you edit your CMS region it should look something like this:
<a href="#link-to-prod"><img src="images/banner1.jpg" width="950" height="237" alt="Alternate Text" /></a>
The image needs to be on your web server, not on your pc.
Also, you need to add the following lines to the page right before the </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="rotating-banner.js"></script>
<link href="rotating-banner.css" rel="stylesheet" type="text/css">
You also must upload all 3 of these files to the root of your server.
Dean
http://www.stxop.com |
|
|
knoterman
Advanced Member
162 Posts Pre-sales questions only
(More Details...)
|
Posted - 12/18/2011 : 20:52
|
Hi,
Is the "root" the DWT file? If so, I did that. The pics are on the web, the Content regions are there. I only see a box and some dots on the website. What am I doing wrong?
Thanks,
Karrie |
|
|
drivers
Advanced Member
109 Posts |
Posted - 12/27/2011 : 04:43
|
This didnt work. Has anyone got this to actually work on their site?
I did it to mine and it threw error messages everywhere and in dreamweaver said that there were syntax errors that needed to be fixed before continuing. All I did was copy and paste and the messages started popping up... did I do something wrong here?
If you have got this to work please let me know what the syntax errors were and how to get it working properly because the idea sounds awesome!
Thanks!
www.djpricetag.com |
|
|
dbdave
ECT Moderator
USA
4331 Posts |
Posted - 12/27/2011 : 08:00
|
When Barry made the original post, I tested it and it worked perfectly.
Are you on the ASP version?
David |
|
|
knoterman
Advanced Member
162 Posts Pre-sales questions only
(More Details...)
|
Posted - 12/27/2011 : 09:32
|
| I'm in ASP and it didn't work out - but it's probably user error. |
|
|
|
Topic |
|
Rotating Banner for Home Page or....
