Solved

JSON - Image Fade

Posted on 2011-03-06
3
757 Views
Last Modified: 2012-05-11
Hi, I have some code which was written for me in JSON, basically it calls the images from a folder and rotates them on a timer.

I want to make them fade on change and I'm not sure if this is a big deal or not. don't really know java. So I found some sample code online that says impliment these lines.

  $("#insideBannerImg1").fadeIn("slow");
            $("#insideBannerImg1").fadeOut("slow");


below is the full code. Am I going on the right direction?

any help would be greatly appreciated

 
<script type="text/javascript" language="javascript">
        var _index01 = 0;
       
        var _currentBannerImage = '';
        // var banners01 = [{ time: 3000, image: 'AgeOfZombies_banner_small747328293.jpg' }, { time: 10000, image: 'banner_small.jpg'}];
        var banners01 = <%= BannerZone01 %>;
      
        // var banners02 = [{ time: 1000, image: 'AgeOfZombies_banner_small747328293.jpg' }, { time: 5000, image: 'banner_small.jpg'}];

        function rotate01() {
            //console.log('test');

            $("#insideBannerImg1").fadeIn("slow");
            $("#insideBannerImg1").fadeOut("slow");

            $('#bannerId1').attr('src', banners01[_index01].image);
            $('#insideBannerImg1').attr('src', banners01[_index01].image);

           

            if (_index01 == banners01.length - 1) {
                _index01 = 0;
            } else {
                _index01++;
            }
            setTimeout(rotate01, banners01[_index01].time);
        }
                   
          
        $(function () {
            setTimeout(rotate01, 0);
           
        });
    </script>

Open in new window

0
Comment
Question by:TheWebGuy38
  • 2
3 Comments
 
LVL 8

Expert Comment

by:McNetic
ID: 35081672
Just to clear up terminology: This is Javascript code. No JSON, no Java.

To begin answering your question: The code you found is based on the jquery javascript framework. You'll have to include this with your webpage to make it work, if you don't have already. As far as I understand, you already have a working page where the images rotate, but without fading? Could you please post this working example or provide a link to it, so can I try to explain how to add fadeIn and fadeOut correctly.
0
 

Author Comment

by:TheWebGuy38
ID: 35118711
here is the live page

http://www.ronaldbperelman.com/

and I will post the full code below. calling a json script


aspx

<%@ Master Language="VB" CodeFile="Main.master.vb" Inherits="Templates_Main" %>

<%@ Register TagPrefix="uc1" TagName="Offices" Src="~/includes/Offices.ascx" %>



	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Ronald B. Perelman M.D.</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<style type="text/css">
.auto-style1 {
	color: #484848;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      
</head>

<body style="margin: 0">
  <script type="text/javascript" language="javascript">
        var _index01 = 0;
       
        var _currentBannerImage = '';
        // var banners01 = [{ time: 3000, image: 'AgeOfZombies_banner_small747328293.jpg' }, { time: 10000, image: 'banner_small.jpg'}];
        var banners01 = <%= BannerZone01 %>;
      
        // var banners02 = [{ time: 1000, image: 'AgeOfZombies_banner_small747328293.jpg' }, { time: 5000, image: 'banner_small.jpg'}];

        function rotate01() {
            //console.log('test');

            $("#insideBannerImg1").fadeIn("slow");
            $("#insideBannerImg1").fadeOut("slow");

            $('#bannerId1').attr('src', banners01[_index01].image);
            $('#insideBannerImg1').attr('src', banners01[_index01].image).fadeOut("slow");

           

            if (_index01 == banners01.length - 1) {
                _index01 = 0;
            } else {
                _index01++;
            }
            setTimeout(rotate01, banners01[_index01].time);
        }
                   
          
        $(function () {
            setTimeout(rotate01, 0);
           
        });
    </script>
<form id="Form1" runat="server">
<table cellpadding="0" cellspacing="0" 
    style="border: 1px solid #bbbbbb; width: 980px">
	<tr>
		<td style="height: 86px; background-image: url('Images/Header_Bg.jpg'); text-align: left; vertical-align: top;">
		<a href="/Default.aspx"><img alt="" src="Images/HeaderLogo.jpg" /></a></td>
	</tr>
	<tr>
		<td style="height: 10px">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px">
				<div style="background-color: #525252; HEIGHT: 10px; margin-bottom: 3px;">
				<img src="Images/spacer.gif" width="212" height="1" alt="">
				</div></td>
				<td>
				<div style="background-color: #2775f5; HEIGHT: 10px; margin-left: 3px; margin-bottom: 3px;"></div></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td style="height: 245px; vertical-align: top; text-align: left;">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px; height: 245px; vertical-align: middle; text-align: center;">
				<img src="Images/spacer.gif" width="212" height="1" alt="" />
				<div style="margin: 15px; background-color: #ffffff; vertical-align: middle; text-align: center;">
					<map id="ImgMap0" name="ImgMap0">
					<area alt="" coords="5, 6, 111, 26" href="/Default.aspx" shape="rect" />
					<area alt="" coords="6, 33, 118, 58" href="/Services.aspx" shape="rect" />
					<area alt="" coords="6, 65, 118, 87" href="/Locations.aspx" shape="rect" />
					<area alt="" coords="7, 92, 119, 117" href="/About.aspx" shape="rect" />
					<area alt="" coords="4, 124, 114, 148" href="/Contact.aspx" shape="rect" />
					</map>
					<img alt="" src="Images/TopLeftMenu.jpg" usemap="#ImgMap0" /></div></td>
				<td style="vertical-align: top; text-align: left" >
				<div style="margin-left: 3px">
				<!-- Rotating Header Image goes here -->

               
       <img id="bannerId1" src="" width="765" height="246"/>


				
				
				<!-- End Rotating Header Image goes here -->
				</div>
				
				</td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td style="height: 10px">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px">
				<div style="background-color: #c0c0c0; HEIGHT: 10px; margin-bottom: 3px;">
				<img src="Images/spacer.gif" width="212" height="1" alt="" />
				</div></td>
				<td>
				<div style="background-color: #d3d3d3; HEIGHT: 10px; margin-bottom: 3px; margin-left: 3px;"></div></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td style="height: 357px; text-align: left; vertical-align: top;">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px; background-color: #e9e9e9; height: 358px; vertical-align: top;">
				<img src="Images/spacer.gif" width="212" height="1" alt="" />
				
                <div style="margin: 7px">
                  <uc1:Offices id="Offices" runat="server"></uc1:Offices>
                </div>

				</td>
				<td style="vertical-align: top; text-align: left; Min-height: 358px;">
				<div style="margin: 7px auto; Min-height: 358px;">
				<!-- Main Content goes here -->
				<asp:contentplaceholder id="ContentPlaceHolderMain" runat="server">

       		   </asp:contentplaceholder>
				
				
				<!-- End Main Content goes here -->

				
				</div></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td style="height: 10px">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px">
				<div style="background-color: #bebebe; HEIGHT: 10px; margin-bottom: 3px; margin-top: 3px;">
				<img src="Images/spacer.gif" width="212" height="1" alt="" />
				
				</div></td>
				<td>
				<div style="background-color: #2775f5; HEIGHT: 10px; margin-bottom: 3px; margin-left: 3px; margin-top: 3px;"></div></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td style="height: 76px; vertical-align: top; text-align: left;">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px; background-color: #777777; height: 41px; vertical-align: middle; text-align: center;">
				<img src="Images/spacer.gif" width="212" height="1" alt="" />
				<div class="c_text" style="margin:7px; width: 199px; text-align: left; white-space: normal;">
						Copyright 2011 © Ronald B. Perelman M.D.<br /><br />
						<br style="line-height:3px">
						<span style="color:#E5E5E5">All rights reserved.</span>&nbsp; 
					</div>

				
				</td>
				<td style="vertical-align: middle; text-align: center">
				<div class="c2_text" style="vertical-align: middle; text-align: center">
						 <a href="/Default.aspx" >Main Page</a><img alt="" src="images/c1.gif" style="  vertical-align:middle"><a href="/Services.aspx"><span class="auto-style1">Our 
						 Services</span></a> <img alt="" src="images/c1.gif" style="  vertical-align:middle"> 
						 <a href="/Locations.aspx" ><span class="auto-style1">Our 
						 Locations</span></a>&nbsp; <img alt="" src="images/c1.gif" style="  vertical-align:middle"><a href="/About.aspx" ><span class="auto-style1">About 
						 Us <a></a><img alt="" src="images/c1.gif" style="  vertical-align:middle"><a href="/Contact.aspx" >Contact Us</a></div>
</td>
			</tr>
		</table>
		</td>
	</tr>
</table>
</form>
</body>

</html>

	

.vb


Imports System.IO
Imports System.Data
Imports System.Data.SqlClient


Partial Class Templates_Main
    Inherits System.Web.UI.MasterPage

    Protected BannerZone01 As String

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        'Dim Ds As New DataSet
        'Dim myColumn1 As DataColumn
       
        'Dim Tables As DataTable = New DataTable
        'Tables.TableName = "Banners"
        'Ds.Tables.Add("Banners")

        ' Create new DataColumn, set DataType, ColumnName and add to DataTable.    
        'myColumn1 = New DataColumn()
        'myColumn1.DataType = System.Type.GetType("System.String")
        'myColumn1.ColumnName = "ImageUrlField"
        ' Ds.Tables("Banners").Columns.Add(myColumn1)

        'Dim dirInfo As New DirectoryInfo(Server.MapPath("~/Images/HeaderImages/"))
        ' Dim File As FileInfo

        'For Each File In dirInfo.GetFiles
        'For Each dr As DataRow In Ds.Tables("Banners").Rows
        'dr("ImageUrlField") = File.FullName
        'Ds.Tables("Banners").Rows.Add(dr)
        'Next
        'Next

        'DataList1.DataSource = Ds
        'DataList1.DataBind()




        Dim Ds As New DataSet
        Dim myColumn1 As DataColumn

        Dim Tables As DataTable = New DataTable
        Tables.TableName = "Banners"
        Ds.Tables.Add("Banners")

        ' Create new DataColumn, set DataType, ColumnName and add to DataTable.    
        myColumn1 = New DataColumn()
        myColumn1.DataType = System.Type.GetType("System.String")
        myColumn1.ColumnName = "ImageUrlField"
        Ds.Tables("Banners").Columns.Add(myColumn1)

        Dim dr As DataRow
        Dim xDir = Directory.GetFiles(Server.MapPath("~/Images/HeaderImages/"))
        For Each x As String In xDir
            dr = Ds.Tables("Banners").NewRow()
            dr("ImageUrlField") = x
            Ds.Tables("Banners").Rows.Add(dr)
        Next


        BannerZone01 = BuildBannerJSON(Ds)



    End Sub

    Function BuildBannerJSON(ByVal data As DataSet) As String
        Dim JSON As String
        JSON = "["
        For Each dr As DataRow In data.Tables("Banners").Rows
            'JSON += "{ time:'1000', image:'" + dr("ImageUrlField").ToString().Replace("D:\Inetpub\RonaldBPerelman.com\", "").Replace("\", "\\") + "'},"
            JSON += "{ time:'9000', image:'" + dr("ImageUrlField").ToString().Replace(Server.MapPath("/"), "").Replace("\", "\\") + "'},"
        Next
        JSON = JSON.Trim(",")
        JSON += "]"
        Return JSON


    End Function

End Class

Open in new window

0
 
LVL 8

Accepted Solution

by:
McNetic earned 500 total points
ID: 35127250
Ok. This can be done very simply by fading out the image, replacing it, and fading in again, like this:

        function rotate01() {
            $('#bannerId1').fadeOut('slow', function(){
              $(this).attr('src', banners01[_index01].image).fadeIn('slow')});;

            _index01 = (_index01 + 1) % banners01.length;
            setTimeout(rotate01, banners01[_index01].time);
        }

Open in new window


This will, however, give strange effects because the images can not be loaded fast enough in initial showing. Get get a proper fade-over effect, you'll need more than one image element anyways, so I propose the following solution:

Add every image for the fading to the web page, making all but the first invisible by setting style.display to none:
<div style="margin-left: 3px; position: relative; width: 765px; height: 246px">
<!-- Rotating Header Image goes here -->
       <img class="banner01" src="Images\\HeaderImages\\HeaderImage2.jpg" width="765" height="246"/>
       <img class="banner01" src="Images\\HeaderImages\\HeaderImage3.jpg" width="765" height="246" style="display: none"/>
       <img class="banner01" src="Images\\HeaderImages\\HeaderImage4.jpg" width="765" height="246" style="display: none"/>
       <img class="banner01" src="Images\\HeaderImages\\HeaderImage5.jpg" width="765" height="246" style="display: none"/>
<!-- End Rotating Header Image goes here -->
</div>

Open in new window

As you can see, the surrounding div also gets additional styling: position: relative to allow the images be position above each other, width and height to make sure it still displays as before. All images get the same class attribute. This has also to get a style, defined globally in the style section in the header:

.banner01 {
  position: absolute;
  top: 0px;
  left: 0px;
}

Open in new window

This makes all of the images be positioned in the same place, above each other.

At last, change your javascript to the following:
 
  <script type="text/javascript" language="javascript">
        var _index01 = 0;
        var _time01 = 9000;

        function rotate01() {
            var banners = $('.banner01');
            banners.eq(_index01).fadeOut('slow');
            _index01 = (_index01 + 1) % banners.length;
            banners.eq(_index01).fadeIn('slow');
            setTimeout(rotate01, _time01);
        }
                   
          
        $(function () {
            setTimeout(rotate01, 0);
           
        });
    </script>

Open in new window

As you can see, you no longer have to provide the image urls in js, as they are already in the web page. This also makes them load before the animation starts. The timeout between images is now only set once for all images.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

There is basically two types of AJAX request in mootools. Request  and Request.HTML Request: Request is the basic XHR request class in MooTools. While not extremely useful on its own, it provides the basic functionality for both Request.HTM…
This exercise is about for the following scenario: Dmgr and One node with 2 application server. Each application server contains it owns application. Application server name as follows server1 contains app1 server2 contains app1 Prereq…
This video discusses moving either the default database or any database to a new volume.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

705 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