Solved

Vertcally align images by removing javascript carousel

Posted on 2013-01-08
2
166 Views
Last Modified: 2013-05-15
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
Comment
Question by:UName10
2 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 330 total points
ID: 38758581
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
 

Author Comment

by:UName10
ID: 38814016
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

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now