Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 181
  • Last Modified:

Vertcally align images by removing javascript carousel

My page here uses javascript for the left-nav images, but I want to separate them out by removing javascript so they're vertically listed instead.

Here's the html:
	<% ' images
		if len(""&rsAdvert("Image1"))>0 then addtoarray images,rsAdvert("Image1")
		if len(""&rsAdvert("Image2"))>0 then addtoarray images,rsAdvert("Image2")
		if len(""&rsAdvert("Image3"))>0 then addtoarray images,rsAdvert("Image3")
		if len(""&rsAdvert("Image4"))>0 then addtoarray images,rsAdvert("Image4")
		if len(""&rsAdvert("Image5"))>0 then addtoarray images,rsAdvert("Image5")
		if len(""&rsAdvert("Image6"))>0 then addtoarray images,rsAdvert("Image6")
		
		if isarray(images) then %>
    	<div class="bg">
            <div id="main-photos">
            	<% for i = 0 to ubound(images) %>
                <img alt="<%=(Session("PublicFranchiseName"))%> Business Images" src="/includes/tn.asp?src=<%=server.URLEncode(images(i))%>&amp;" style="<% if i>0 then response.write "display:none;" %>" id="MainImage<%=i%>" class="MainImage" />
                <% next %>
            </div>
        	<div id="photos-preview">
            	<input class="photos-btn" type="button" onclick="slidePrev();" value="»" />
            	<% for i = 0 to ubound(images)
				%><img alt="Small <%=(Session("PublicFranchiseName"))%> Business Images" src="/includes/tn.asp?src=<%=server.URLEncode(images(i))%>&amp;w=30" style="margin:3px;cursor:pointer" onclick="$('.MainImage').fadeOut(500).hide(0,function(){$('#MainImage<%=images(i)%>').fadeIn(500)});" /><%
				next %>
                <input class="photos-btn" type="button" onclick="slideNext();" value="»" />
            </div>
        </div>
        <script type="text/javascript">
			var SlideActive = 0;
			var SlideMax = <%=ubound(images)%>;
			
			function slidePrev() {
				SlideActive -=1;
				if(SlideActive<0){SlideActive=SlideMax;}
				$('.MainImage:not(#MainImage'+SlideActive+')').fadeOut(500);
				$('#MainImage'+SlideActive).delay(500).fadeIn(500);
			}
			
			function slideNext() {
				SlideActive +=1;
				if(SlideActive>SlideMax){SlideActive=0;}
				$('.MainImage:not(#MainImage'+SlideActive+')').fadeOut(500);
				$('#MainImage'+SlideActive).delay(500).fadeIn(500);
			}
			
			$(function(){
				setInterval("slideNext()",5000);
			});
		</script>
    	<% end if %>

Open in new window


If anyone could help that'd be great.
0
UName10
Asked:
UName10
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Can't you just change the css to display block?

#photos-preview img {
      max-height:22px;
      min-height:22px;
      max-width:30px;
      min-width:30px;
      display: block;
}
0
 
UName10Author Commented:
Hi there,

Thanks for the reply and sorry for the delay - yep I'll try that.  I want to also add it to a new javascript slider as this fadeout one skips sometimes and looks bad.

There's another question open for that so I'll see what's suggested; ideally I need to separate out the images from the current javascript entirely I think..

I'll come back soon and see how I get on.

Many thanks again.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now