Zen Cart Logo
Forums / All Other Contributions/Addons / Help with image slider

Help with image slider

Locked

Views: 4,089

Results 1 to 18 of 18
This thread is locked. New replies are disabled.
25 Jul 2011, 2:24 AM
#1
mrballs avatar

mrballs

New Zenner

Join Date:
Jul 2011
Location:
Australia
Posts:
16
Plugin Contributions:
0

Help with image slider

Hey guys,

wondering whether you might be able to help a novice out.

I have just installed 'Automatic Image Slider' from

http://www.kerrinhardy.com/2011/02/10/step-by-step-guide-to-installing-the-automatic-image-slider-w-css-jquery-from-soh-tanaka-in-zen-cart/

and im having a few little issues with the setup as can be seen here at my site fossilfishcreations.com.

I believe i followed all the steps exactly but im having trouble with where the images are sitting on my homepage. Not knowing a great deal about code i was wondering whether someone may be able to help me out.

The images i define in slider1 are always low and chopped in half regardless of the size of the image i insert? Also id like the slider to sit on the top of the page and not show 1,2,3,4 next to them.

If anybody can help it would be greatly appreciated and would save me ripping all the hairs of my head! :wacko:

cheers
Darren

25 Jul 2011, 6:16 AM
#2
gaurav10feb avatar

gaurav10feb

Zen Follower

Join Date:
Jan 2010
Location:
Australia
Posts:
243
Plugin Contributions:
1

Re: Help with image slider

please copy the code here.

25 Jul 2011, 7:50 AM
#3
mrballs avatar

mrballs

New Zenner

Join Date:
Jul 2011
Location:
Australia
Posts:
16
Plugin Contributions:
0

Re: Help with image slider

which particular code would you like to see mate?.

/--Automatic Image Slider w/ CSS & jQuery from Soh Tanaka--/

/--Main Container--/
.main_view {
position: relative;
}
/--Window/Masking Styles--/
.window {
height:240px; width: 400px;
overflow: hidden; /--Hides anything outside of the set width/height--/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}

/--Paging Styles--/
.paging {
position: absolute;
bottom: 10px; right: -3px;
width: 178px; height:47px;
z-index: 100; /--Assures the paging stays on the top layer--/
text-align: center;
line-height: 40px;
background: url(../images/paging_bg2.png) no-repeat;
display: none; /--Hidden by default, will be later shown with jQuery--/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

/--End of Automatic Image Slider w/ CSS & jQuery from Soh Tanaka--/


<?php /** * Page Template * * Main index page<br /> * Displays greetings, welcome text (define-page content), and various centerboxes depending on switch settings in Admin<br /> * Centerboxes are called as necessary * * @package templateSystem * @copyright Copyright 2003-2006 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license <http://www.zen-cart.com/license/2_0.txt> GNU Public License V2.0 * @version $Id: tpl_index_default.php 3464 2006-04-19 00:07:26Z ajeh $ */ ?> <div class="centerColumn" id="indexDefault"> <h1 id="indexDefaultHeading"><?php echo HEADING_TITLE; ?></h1> <?php if (SHOW_CUSTOMER_GREETING == 1) { ?> <h2 class="greeting"><?php echo zen_customer_greeting(); ?></h2> <?php } ?> <!-- deprecated - to use uncomment this section <?php if (TEXT_MAIN) { ?> <div id="" class="content"><?php echo TEXT_MAIN; ?></div> <?php } ?>--> <!-- deprecated - to use uncomment this section <?php if (TEXT_INFORMATION) { ?> <div id="" class="content"><?php echo TEXT_INFORMATION; ?></div> <?php } ?>--> <?php if (DEFINE_MAIN_PAGE_STATUS >= 1 and DEFINE_MAIN_PAGE_STATUS <= 2) { ?> <?php /** * get the Define Main Page Text */ ?> <div id="indexDefaultMainContent" class="content"><?php require($define_page); ?></div> <?php } ?> <!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka --> <div class="main_view"> <div class="window"> <div class="image_reel"> <a href="#"><img src="includes/templates/freetemplate1/images/slider1.jpg" alt="" /></a> <a href="#"><img src="includes/templates/freetemplate1/images/slider2.jpg" alt="" /></a> <a href="#"><img src="includes/templates/freetemplate1/images/slider3.jpg" alt="" /></a> <a href="#"><img src="includes/templates/freetemplate1/images/slider4.jpg" alt="" /></a> </div> </div> <div class="paging"> <a href="#" rel="1">1</a> <a href="#" rel="2">2</a> <a href="#" rel="3">3</a> <a href="#" rel="4">4</a> </div> </div> <script type="text/javascript" src="includes/templates/freetemplate1/jscript/jscript_jquery-1.5.min.js"></script> <!-- eof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka --> <?php $show_display_category = $db->Execute(SQL_SHOW_PRODUCT_INFO_MAIN); while (!$show_display_category->EOF) { ?> <?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_FEATURED_PRODUCTS') { ?> <?php /** * display the Featured Products Center Box */ ?> <?php require($template->get_template_dir('tpl_modules_featured_products.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_featured_products.php'); ?> <?php } ?> <?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_SPECIALS_PRODUCTS') { ?> <?php /** * display the Special Products Center Box */ ?> <?php require($template->get_template_dir('tpl_modules_specials_default.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_specials_default.php'); ?> <?php } ?> <?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_NEW_PRODUCTS') { ?> <?php /** * display the New Products Center Box */ ?> <?php require($template->get_template_dir('tpl_modules_whats_new.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_whats_new.php'); ?> <?php } ?> <?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_UPCOMING') { ?> <?php /** * display the Upcoming Products Center Box */ ?> <?php include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_UPCOMING_PRODUCTS)); ?><?php } ?> <?php $show_display_category->MoveNext(); } // !EOF ?> </div>
25 Jul 2011, 11:51 AM
#4
frank18 avatar

frank18

Deceased

Join Date:
Nov 2007
Location:
Sunny Coast, Australia
Posts:
3,427
Plugin Contributions:
2

Re: Help with image slider

@mrballs

you may want to look into something a bit easier and just as effective.

Check out the third link in my signature for a slide show (that's actually 2 slide shows side by side and synchronized) or the first link for the ultimate fade-in show.

Both are from Dynamic Drive - free open source stuff.

25 Jul 2011, 12:10 PM
#5
mrballs avatar

mrballs

New Zenner

Join Date:
Jul 2011
Location:
Australia
Posts:
16
Plugin Contributions:
0

Re: Help with image slider

hi Frank, i cant actually see your signature?

25 Jul 2011, 12:19 PM
#6
frank18 avatar

frank18

Deceased

Join Date:
Nov 2007
Location:
Sunny Coast, Australia
Posts:
3,427
Plugin Contributions:
2

Re: Help with image slider

mrballs:

hi Frank, i cant actually see your signature?

the last 2 lines of my post is my signature :smile: - just below this line

25 Jul 2011, 12:22 PM
#7
mrballs avatar

mrballs

New Zenner

Join Date:
Jul 2011
Location:
Australia
Posts:
16
Plugin Contributions:
0

Re: Help with image slider

ok now i see after ticking the appropriate box in user panel....

so what is the exact program for the 1st link?

25 Jul 2011, 12:35 PM
#8
frank18 avatar

frank18

Deceased

Join Date:
Nov 2007
Location:
Sunny Coast, Australia
Posts:
3,427
Plugin Contributions:
2

Re: Help with image slider

mrballs:

ok now i see after ticking the appropriate box in user panel....

so what is the exact program for the 1st link?

The show in the first link: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

The show in the second link: http://www.dynamicdrive.com/dynamicindex14/translucentslide.htm

Installation is pretty straight forward

25 Jul 2011, 12:35 PM
#9
mrballs avatar

mrballs

New Zenner

Join Date:
Jul 2011
Location:
Australia
Posts:
16
Plugin Contributions:
0

Re: Help with image slider

Ok, yes i see now :blush:

26 Jul 2011, 12:31 AM
#10
mrballs avatar

mrballs

New Zenner

Join Date:
Jul 2011
Location:
Australia
Posts:
16
Plugin Contributions:
0

Re: Help with image slider

If anyone has ideas regarding the initial problem thatd be great.:smile:

26 Jul 2011, 5:47 AM
#11
gaurav10feb avatar

gaurav10feb

Zen Follower

Join Date:
Jan 2010
Location:
Australia
Posts:
243
Plugin Contributions:
1

Re: Help with image slider

hey mate!!

i cant see you have uploaded slider2,3,4 images on the web.

also to get better looking results your image width and height should be approx.

width = 470px
height = 230px

however your slider1 is opposite.

26 Jul 2011, 7:24 AM
#12
mrballs avatar

mrballs

New Zenner

Join Date:
Jul 2011
Location:
Australia
Posts:
16
Plugin Contributions:
0

Re: Help with image slider

Hey buddy,

yes i only have one image going at the moment, i figured if i cant get one working properly then i wont bother with the others!

You're spot on with the image size mate, simple, thankyou!... i changed the image size initially because it screwed up the template i was using.

Any ideas on how i get the images above main page text?

cheers
Darren

26 Jul 2011, 5:46 PM
#13
buildingblocks avatar

buildingblocks

Totally Zenned

Join Date:
Jun 2008
Posts:
629
Plugin Contributions:
0

Re: Help with image slider

Hi mrballs

You can move the slider up above your text by removing the slider php code from the tpl_index_default.php and placing that code in your admin tools > define_main_page.php page. Place the code above your text.

to turn off the numbers try these settings in the stylesheet

/--Paging Styles--/
.paging {
position: absolute;
bottom: 10px; right: -3px;
width: 178px; height:47px;
z-index: 100; /--Assures the paging stays on the top layer--/
text-align: center;
line-height: 40px;
/background: url(../images/paging_bg2.png) no-repeat;/
display: none; /--Hidden by default, will be later shown with jQuery--/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff; display: none;
}

This isn't the cleanest method but it should do what you want.

27 Jul 2011, 12:00 AM
#14
gaurav10feb avatar

gaurav10feb

Zen Follower

Join Date:
Jan 2010
Location:
Australia
Posts:
243
Plugin Contributions:
1

Re: Help with image slider

follow above reply or


<?php /** * Page Template * * Main index page<br /> * Displays greetings, welcome text (define-page content), and various centerboxes depending on switch settings in Admin<br /> * Centerboxes are called as necessary * * @package templateSystem * @copyright Copyright 2003-2006 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license <http://www.zen-cart.com/license/2_0.txt> GNU Public License V2.0 * @version $Id: tpl_index_default.php 3464 2006-04-19 00:07:26Z ajeh $ */ ?> <div class="centerColumn" id="indexDefault"> <h1 id="indexDefaultHeading"><?php echo HEADING_TITLE; ?></h1> <?php if (SHOW_CUSTOMER_GREETING == 1) { ?> <h2 class="greeting"><?php echo zen_customer_greeting(); ?></h2> <?php } ?> <!-- deprecated - to use uncomment this section <?php if (TEXT_MAIN) { ?> <div id="" class="content"><?php echo TEXT_MAIN; ?></div> <?php } ?>--> <!-- deprecated - to use uncomment this section <?php if (TEXT_INFORMATION) { ?> <div id="" class="content"><?php echo TEXT_INFORMATION; ?></div> <?php } ?>--> <!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka --> <div class="main_view"> <div class="window"> <div class="image_reel"> <a href="#"><img src="includes/templates/freetemplate1/images/slider1.jpg" alt="" /></a> <a href="#"><img src="includes/templates/freetemplate1/images/slider2.jpg" alt="" /></a> <a href="#"><img src="includes/templates/freetemplate1/images/slider3.jpg" alt="" /></a> <a href="#"><img src="includes/templates/freetemplate1/images/slider4.jpg" alt="" /></a> </div> </div> <div class="paging"> <a href="#" rel="1">1</a> <a href="#" rel="2">2</a> <a href="#" rel="3">3</a> <a href="#" rel="4">4</a> </div> </div> <script type="text/javascript" src="includes/templates/freetemplate1/jscript/jscript_jquery-1.5.min.js"></script> <!-- eof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka --> <?php if (DEFINE_MAIN_PAGE_STATUS >= 1 and DEFINE_MAIN_PAGE_STATUS <= 2) { ?> <?php /** * get the Define Main Page Text */ ?> <div id="indexDefaultMainContent" class="content"><?php require($define_page); ?></div> <?php } ?> <?php $show_display_category = $db->Execute(SQL_SHOW_PRODUCT_INFO_MAIN); while (!$show_display_category->EOF) { ?> <?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_FEATURED_PRODUCTS') { ?> <?php /** * display the Featured Products Center Box */ ?> <?php require($template->get_template_dir('tpl_modules_featured_products.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_featured_products.php'); ?> <?php } ?> <?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_SPECIALS_PRODUCTS') { ?> <?php /** * display the Special Products Center Box */ ?> <?php require($template->get_template_dir('tpl_modules_specials_default.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_specials_default.php'); ?> <?php } ?> <?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_NEW_PRODUCTS') { ?> <?php /** * display the New Products Center Box */ ?> <?php require($template->get_template_dir('tpl_modules_whats_new.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_whats_new.php'); ?> <?php } ?> <?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_UPCOMING') { ?> <?php /** * display the Upcoming Products Center Box */ ?> <?php include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_UPCOMING_PRODUCTS)); ?><?php } ?> <?php $show_display_category->MoveNext(); } // !EOF ?> </div>
27 Jul 2011, 12:25 AM
#15
mrballs avatar

mrballs

New Zenner

Join Date:
Jul 2011
Location:
Australia
Posts:
16
Plugin Contributions:
0

Re: Help with image slider

buildingblocks:

Hi mrballs

You can move the slider up above your text by removing the slider php code from the tpl_index_default.php and placing that code in your admin tools > define_main_page.php page. Place the code above your text.

to turn off the numbers try these settings in the stylesheet

/--Paging Styles--/
.paging {
position: absolute;
bottom: 10px; right: -3px;
width: 178px; height:47px;
z-index: 100; /--Assures the paging stays on the top layer--/
text-align: center;
line-height: 40px;
/background: url(../images/paging_bg2.png) no-repeat;/
display: none; /--Hidden by default, will be later shown with jQuery--/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff; display: none;
}

This isn't the cleanest method but it should do what you want.

Thankyou for your reply.

I've managed to get rid of the numbers but getting the slider above the main page text is still a problem.

I copied the slider code and pasted it in the mainpage but all it does is display that code of the front end.

any ideas?

At least the numbers are gone , thankyou for your help.

27 Jul 2011, 12:34 AM
#16
mrballs avatar

mrballs

New Zenner

Join Date:
Jul 2011
Location:
Australia
Posts:
16
Plugin Contributions:
0

Re: Help with image slider

gaurav10feb:

follow above reply or


<?php /** * Page Template * * Main index page<br /> * Displays greetings, welcome text (define-page content), and various centerboxes depending on switch settings in Admin<br /> * Centerboxes are called as necessary * * @package templateSystem * @copyright Copyright 2003-2006 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license <http://www.zen-cart.com/license/2_0.txt> GNU Public License V2.0 * @version $Id: tpl_index_default.php 3464 2006-04-19 00:07:26Z ajeh $ */ ?> <div class="centerColumn" id="indexDefault"> <h1 id="indexDefaultHeading"><?php echo HEADING_TITLE; ?></h1> <?php if (SHOW_CUSTOMER_GREETING == 1) { ?> <h2 class="greeting"><?php echo zen_customer_greeting(); ?></h2> <?php } ?> <!-- deprecated - to use uncomment this section <?php if (TEXT_MAIN) { ?> <div id="" class="content"><?php echo TEXT_MAIN; ?></div> <?php } ?>--> <!-- deprecated - to use uncomment this section <?php if (TEXT_INFORMATION) { ?> <div id="" class="content"><?php echo TEXT_INFORMATION; ?></div> <?php } ?>--> <!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka --> <div class="main_view"> <div class="window"> <div class="image_reel"> <a href="#"><img src="includes/templates/freetemplate1/images/slider1.jpg" alt="" /></a> <a href="#"><img src="includes/templates/freetemplate1/images/slider2.jpg" alt="" /></a> <a href="#"><img src="includes/templates/freetemplate1/images/slider3.jpg" alt="" /></a> <a href="#"><img src="includes/templates/freetemplate1/images/slider4.jpg" alt="" /></a> </div> </div> <div class="paging"> <a href="#" rel="1">1</a> <a href="#" rel="2">2</a> <a href="#" rel="3">3</a> <a href="#" rel="4">4</a> </div> </div> <script type="text/javascript" src="includes/templates/freetemplate1/jscript/jscript_jquery-1.5.min.js"></script> <!-- eof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka --> <?php if (DEFINE_MAIN_PAGE_STATUS >= 1 and DEFINE_MAIN_PAGE_STATUS <= 2) { ?> <?php /** * get the Define Main Page Text */ ?> <div id="indexDefaultMainContent" class="content"><?php require($define_page); ?></div> <?php } ?> <?php $show_display_category = $db->Execute(SQL_SHOW_PRODUCT_INFO_MAIN); while (!$show_display_category->EOF) { ?> <?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_FEATURED_PRODUCTS') { ?> <?php /** * display the Featured Products Center Box */ ?> <?php require($template->get_template_dir('tpl_modules_featured_products.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_featured_products.php'); ?> <?php } ?> <?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_SPECIALS_PRODUCTS') { ?> <?php /** * display the Special Products Center Box */ ?> <?php require($template->get_template_dir('tpl_modules_specials_default.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_specials_default.php'); ?> <?php } ?> <?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_NEW_PRODUCTS') { ?> <?php /** * display the New Products Center Box */ ?> <?php require($template->get_template_dir('tpl_modules_whats_new.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_whats_new.php'); ?> <?php } ?> <?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_UPCOMING') { ?> <?php /** * display the Upcoming Products Center Box */ ?> <?php include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_UPCOMING_PRODUCTS)); ?><?php } ?> <?php $show_display_category->MoveNext(); } // !EOF ?> </div>

That works perfectly!!!

Thankyou very much for your time and help :cool:

27 Jul 2011, 12:35 AM
#17
gaurav10feb avatar

gaurav10feb

Zen Follower

Join Date:
Jan 2010
Location:
Australia
Posts:
243
Plugin Contributions:
1

Re: Help with image slider

looks like you have got things sorted. i checked ur website and it looks like wat u want.

i will recommend to add all the images first to see the effects.

27 Jul 2011, 11:13 AM
#18
buildingblocks avatar

buildingblocks

Totally Zenned

Join Date:
Jun 2008
Posts:
629
Plugin Contributions:
0

Re: Help with image slider

mrballs:

Thankyou for your reply.

I've managed to get rid of the numbers but getting the slider above the main page text is still a problem.

I copied the slider code and pasted it in the mainpage but all it does is display that code of the front end.

any ideas?

That is probably because you pasted the code while the text editor was in htmlarea mode. When pasting code the text editor needs to be in plain text mode. Adding the slider to your define main page gives easier access.