Help with sliders


#1

First off lets be clear here… I am a noob, so I will ask noob questions and be ignorant of many things like a noob.

With that out of the way…

I just started using Zencart. While reading forums and such I learned that I could purchase or find for free a template. So I did just that. You can go to www.contactzoneagility.com and have a look if you would like. So far I have been able to do a lot of customizing from the instructions provided by the developer in their Readme.txt file.

This particular template has a slider across the top. Originally it had five panels that I could customize and rotate through. I became curious if I could add more panels so I went in and did some experimenting with the define_main_page.php and was able to add additional panels. The issue I have is that the extra panel shortcut numbers start stacking when I have more than 5 panels. I think it looks ugly that way.

So after doing a lot of research and experimentation I am coming here to see if anyone can tell me how I make the shortcut numbers all line up along the bottom of the slider area.

Here is my define_main_page.php as it is now with the SIX sliders

<?php /* User guide: Step1: upload your own pictures to bluecartpro/images with width 944px height=366px Step2: Replace the URL value.for example change http://www.example.com to http://www.google.com Step3: Replace the IMAGE value , e.g: change 01.png to example.jpg Step4: this is an optional variable. you can set the picture alt text. If you have trouble in this ,you can drop me an email consulting with this. mailto: Blingthemes@gmail.com Or Visit: http://support.blingthemes.com */ define(URL1,'http://www.example.com'); define(URL2,'http://www.example.com'); define(URL3,'http://www.example.com'); define(URL4,'http://www.example.com'); define(URL5,'http://www.example.com'); define(URL6,'http://www.example.com'); define(IMAGE1,'contactzoneagility_com_slider1_jumps.png');// recommend width 744px height=280px / define(IMAGE2,'contactzoneagility_com_slider_czaad.png'); define(IMAGE3,'contactzoneagility_com_slider3_weaves.png'); define(IMAGE4,'contactzoneagility_com_slider_czaad.png'); define(IMAGE5,'contactzoneagility_com_slider2_aframe.png'); define(IMAGE6,'contactzoneagility_com_slider_czaad.png'); ?>
<script type="text/javascript" src="includes/templates/estorenow/jscript/jscript_easySlider.js"></script>

<script type="text/javascript">
	$(document).ready(function(){	
	    
		$("#slider").easySlider({
			auto: true, 
			continuous: true,
			numeric: true
		});
		
	});	
</script>



	<div id="slider">
		<ul>				
			<li><a href="<?php echo URL1 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE1 ?>"  /></a></li>
			<li><a href="<?php echo URL2 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE2 ?>"  /></a></li>
			<li><a href="<?php echo URL3 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE3 ?>"  /></a></li> 
			<li><a href="<?php echo URL4 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE4 ?>"  /></a></li>
			<li><a href="<?php echo URL5 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE5 ?>"  /></a></li>
			<li><a href="<?php echo URL5 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE6 ?>"  /></a></li>
		
		</ul>
	</div>

FYI - I tried to contact blingthemes and so far I have not gotten any response. If I do I will post that answer here.

On an added note. I see reference to jscript_easySlider.js and I am going to do some research on this as well but in the interim any help, advice, knowledge you can pass my way would be greatly appreciated.

Thanks
Lee


#2

It will not be in a js script, you will probably never even have to look or change anything in there.

What you are looking for is in the stylesheet.css on line 1404
#control_div {
height: 28px;
left: 740px;
position: absolute;
top: 410px;
width: 200px;
}
You can change the width to probably 250 will do, if you stick to 6

Or you could just delete the whole number thing in the indexHomebody.php (or index.php, what ever it is called),
and delete these lines:

Be sure you have a backup of these files before making any changes.

Note: An updated of the Zencart-theme will probably overwrite all changes you made in the past,present and future, so remember and backup.