?
Solved

auto scrolling image slideshow with left right button using javascript

Posted on 2010-01-12
5
Medium Priority
?
2,945 Views
Last Modified: 2013-11-19
hi
i would like to have slideshow similar to this website www.makaan.com 
can any one tell me how to get going this...
i checked the body onload function too..
but current body is already having 2 onload function
<body onload="ddd(0);dddcom(0);">
i checked the view source, and but didnt got success in scrolling things...
i fetch images from database using php and smarty and everything is fine just images are not scrolling..
0
Comment
Question by:global_expert_advice
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 6

Expert Comment

by:magedroshdy
ID: 26296019
0
 
LVL 1

Author Comment

by:global_expert_advice
ID: 26297127
hi
here is the code i'm using with javascript files
<link href='http://img.makaan.com/ssi/css/home-stylesheet.css' rel='stylesheet' type='text/css' > 
<script src='http://img.makaan.com/ssi/js/chomepage1.js' type='text/javascript' language='javascript1.2'></script>

this in body tag
<body onload="ddd(0);dddcom(0);load('table-content',5000,'http://img.makaan.com/images/scroll/','12'); slideshow ('startslide');">

you can the onload function..
rest of the code is below...
i'm fetching the images from database using smarty.. and i'm getting it you can check in view source..
but only problem is that its not scrolling..
check my direct link...
http://makaan.instantrankingseo.com/final/
you can see the featured projects ... its getting images but not scrolling...

i need urgent help on this..
atlast i'm taking and implementing the  scrolling teching from www.makaan.com
if you can get the coding tech. from there please let me know.
<center>&nbsp;<div style="clear:both;height:17px;"></div>
<div style="background:#FFF; float:auto;width:953px;">
	<div style='float:auto;padding-left:17px;padding-right:17px;'>
		<b class='b1h'></b><b class='b2h'></b><b class='b3h'></b><b class='b4h'>
		</b>
		<div class='headh' >
			<div style='font-size:14px;font-weight:bold;padding-bottom:3px;padding-left:10px;' align='left'>Featured Projects</div>
		</div>
		<div class='contenth' style='padding:0px;'>
			<div style='height:180px;#height:181px;padding:0px;'>
				<div id='expertService' style='float:left;padding:0px;'>
					<div style='width:930px;margin: 0px; padding: 0px;float:left;overflow:hidden;' id='expert-inner' >
						<div style="float: left; width: 5%; text-align: center;padding:0px;padding-top:50px;">
							<a id="slideprevious" style="visibility:hidden;" href="javascript:next_previous('previous','http://img.makaan.com/images/scroll/')">
							<img id="dimage_previous" src="http://img.makaan.com/images/scroll/prev-disable.gif"   border="0" alt="previous"><img id="image_previous" src="http://img.makaan.com/images/scroll/prev.gif"   border="0" alt="previous" style="display:none;">
							</a></div>
						<div id="container" style='height:100%;width: 89%;float:left;padding:0px;'>
							<div id="content-container" style='float:auto;padding:0px;'>
								<div id="content" class="content" style="visibility:visible; padding:0px; ">
									<table id="table-content" border="0" cellpadding="0" cellspacing="0" align='center'>
										<tr >{section name=var loop=$featured_proj_image} 
											<td valign='top' align='center' width='100%'>
											<div class='expertdetails' style="overflow:hidden;float:left;margin:0;padding:0;width:208px;">
												<div style='padding-top:10px;width:90%;'>
													<div id='projectwrapper'>
														<div id='firstDiv'>
															<a href='http://www.tulipwhite.co.in/' target='_blank' onClick='javascript: update_banner_hits(2443,"2")' >
															<br>Featured Projects</a>
														</div>
														<div id='secondDiv'>
															<a href='http://www.tulipwhite.co.in/' onClick='javascript: update_banner_hits(2443,"2")' target='_blank'>
															<img src="uploads/projects/{$featured_proj_image[var]}" align='top' alt='1257154270-featured-project-new.' title='1257154270-featured-project-new.' height='100' width='140'/></a>
														</div></div></div>
												<div style='width:95%;text-align:center;'>
													<div style='padding:0px;'>
														<a href='http://www.tulipwhite.co.in/' onClick='javascript: update_banner_hits(2443,"2")' target='_blank' class='hrefhomelinks' style='color:#000000;text-decoration:none;'>
														<b>{$featured_proj_name[var]}</b></a></div>
													<div style='color: #4470A1;padding-top:4px;text-align: justify;width:165px;height:25px;'>
														<a href='http://www.tulipwhite.co.in/' onClick='javascript: update_banner_hits(2443,"2")' target='_blank' class='hrefhomelinks'>
														<span style='text-align: justify;'>{$featured_proj_desc[var]}</span></a></div>
													<div style='text-align:right;float:right;color: #4470A1;padding-right:15px;height:25px;' class='textnopad'>
														<a href='http://www.tulipwhite.co.in/' onClick='javascript: update_banner_hits(2443,"2")' target='_blank' class='hrefhomelinks'>
														<span class='textnopad'>more &gt;&gt;</span></a></div>
													<div style='clear:both'>
													</div></div>
												<div style='clear:both'></div>
											</div></td>{/section}
										</tr>
									</table></div></div></div>
						<div style="float: right; width: 5%; text-align: center;padding:0px;padding-top:50px;">
							<a id="slidenext" style="visibility:hidden;" href="javascript:next_previous('next','http://img.makaan.com/images/scroll/')">
							<img id="dimage_next" src="http://img.makaan.com/images/scroll/next-disable.gif"   border="0" alt="next"><img id="image_next" src="http://img.makaan.com/images/scroll/next.gif"   border="0" alt="next" style="display:none;">
							</a></div>
						<div style='clear:both'></div></div></div></div></div>
		<b class='b4bh'></b><b class='b3bh'></b><b class='b2bh'></b>
		<b class='b1h'></b></div></div> 
</center>

Open in new window

0
 
LVL 6

Expert Comment

by:magedroshdy
ID: 26301550
i'm getting lost, are you working on http://makaan.instantrankingseo.com/final/ or just taking the code to another website ?
if you are working on it, i don't see any problems, if you are taking the code form it and working with other site, please send me the source file you're working on it
0
 
LVL 1

Accepted Solution

by:
global_expert_advice earned 0 total points
ID: 26306774
hi
well i corrected the problem... sorry for not posting here in time.... i feel there was a problem with smarty and  javascript,,, using the code in .tpl file was not firing the slideshow...
what option i had was to create the slideshow in separate file .php and use the same in .tpl file as iframe... and its working...

well i love to have the code working through smarty...
0
 
LVL 6

Expert Comment

by:magedroshdy
ID: 26307709
good to hear
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question