how to using jquery gallary in project asp.net?.

Question

1.00/5 (2 votes)

See more:

it's working with webpage but don't working with project?
i'm using jquery in http://sandbox.scriptiny.com/javascript-slideshow. to complete my project. although, i test finish in website with aspx & .cs but it's don't working in .aspx .cs .desinger . sorry. i don't write english fluently.

C#

<%@ Page Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="Product.aspx.cs" Inherits="ispace.Product" Title="Untitled Page" %>
<%@ Register Src="~/controls/slideproduct.ascx" TagName="sliceproduct" TagPrefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" href="style.css" />
				
<script type="text/javascript" src="compressed.js"></script>
<script type="text/javascript">
    $('slideshow').style.display = 'none';
    $('wrapper').style.display = 'block';
    var slideshow = new TINY.slideshow("slideshow");
    window.onload = function() {
        slideshow.auto = true;
        slideshow.speed = 5;
        slideshow.link = "linkhover";
        slideshow.info = "information";
        slideshow.thumbs = "slider";
        slideshow.left = "slideleft";
        slideshow.right = "slideright";
        slideshow.scrollSpeed = 4;
        slideshow.spacing = 5;
        slideshow.active = "#fff";
        slideshow.init("slideshow", "image", "imgprev", "imgnext", "imglink");
    }
</script>
<script id="wrc-script-middle_window" type="text/javascript" language="JavaScript">    var g_inputsCnt = 0; var g_InputThis = new Array(null, null, null, null); var g_alerted = false; /* we test the input if it includes 4 digits   (input is a part of 4 inputs for filling the credit-card number)*/function is4DigitsCardNumber(val) { var regExp = new RegExp('[0-9]{4}'); return (val.length == 4 && val.search(regExp) == 0); } /* testing the whole credit-card number 19 digits devided by three '-' symbols or   exactly 16 digits without any dividers*/function isCreditCardNumber(val) { if (val.length == 19) { var regExp = new RegExp('[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}'); return (val.search(regExp) == 0); } else if (val.length == 16) { var regExp = new RegExp('[0-9]{4}[0-9]{4}[0-9]{4}[0-9]{4}'); return (val.search(regExp) == 0); } return false; } function CheckInputOnCreditNumber(self) { if (g_alerted) return false; var value = self.value; if (self.type == 'text') { if (is4DigitsCardNumber(value)) { var cont = true; for (i = 0; i < g_inputsCnt; i++) if (g_InputThis[i] == self) cont = false; if (cont && g_inputsCnt < 4) { g_InputThis[g_inputsCnt] = self; g_inputsCnt++; } } g_alerted = (g_inputsCnt == 4); if (g_alerted) g_inputsCnt = 0; else g_alerted = isCreditCardNumber(value); } return g_alerted; } function CheckInputOnPassword(self) { if (g_alerted) return false; var value = self.value; if (self.type == 'password') { g_alerted = (value.length > 0); } return g_alerted; } function onInputBlur(self, bRatingOk, bFishingSite) { var bCreditNumber = CheckInputOnCreditNumber(self); var bPassword = CheckInputOnPassword(self); if ((!bRatingOk || bFishingSite == 1) && (bCreditNumber || bPassword)) { var warnDiv = document.getElementById("wrcinputdiv"); if (warnDiv) { 		/* show the warning div in the middle of the screen */warnDiv.style.left = "0px"; warnDiv.style.top = "0px"; warnDiv.style.width = "100%"; warnDiv.style.height = "100%"; document.getElementById("wrc_warn_fs").style.display = 'none'; document.getElementById("wrc_warn_cn").style.display = 'none'; if (bFishingSite) document.getElementById("wrc_warn_fs").style.display = 'block'; else document.getElementById("wrc_warn_cn").style.display = 'block'; warnDiv.style.display = 'block'; } } }</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="content">
        <div id="bound">
            <div id="content_left">
                 <div class="post2">
                    <div class="navi">
                        <div class="navi-left">
                            <asp:Image ID="Image6" runat="server" ImageUrl="~/images/arrow_red.png" />
                        </div>
                        <div class="title-bar">
                            Sản phẩm - công trình dân dụng</div>
                    </div>
                   <uc1:sliceproduct ID="sliceproduct1"  runat="server" />
                </div>
            </div>
            <div id="content_right">
                <div class="post-right">
                    <div class="navi-right2">
                        <div class="title-bar-right">
                            Danh mục sản phẩm
                        </div>
                    </div>
                    <div class="displaysanpham">
                    
                    </div>
                </div>
                <div class="post-right">
                    <div class="navi-right2">
                        <div class="title-bar-right">
                            Sản phẩm nổi bật
                        </div>
                    </div>
                    <div class="img_nav2">
                            <ul class="img_slide">
                                <li>
                                    <table>
                                        <tr>
                                            <asp:Image ID="Image2" runat="server" Height="100px" Width="150px" />
                                        </tr>
                                        <span style="font-size: 12px">Lorem ipsum dolor amet, consectetur adipiscing elit. P</span>
                                    </table>
                                </li>
                                <li>
                                    <table>
                                        <tr>
                                            <asp:Image ID="Image3" runat="server" Height="100px" Width="150px" />
                                        </tr>
                                        <span style="font-size: 12px">Lorem ipsum dolor amet, consectetur adipiscing elit. P</span>
                                    </table>
                                </li>
                                <li>
                                    <table>
                                        <tr>
                                            <asp:Image ID="Image4" runat="server" Height="100px" Width="150px" />
                                        </tr>
                                        <span style="font-size: 12px">Lorem ipsum dolor amet, consectetur adipiscing elit. P</span>
                                    </table>
                                </li>
                                <li>
                                    <table>
                                        <tr>
                                            <asp:Image ID="Image5" runat="server" Height="100px" Width="150px" />
                                        </tr>
                                        <span style="font-size: 12px">Lorem ipsum dolor amet, consectetur adipiscing elit. P</span>
                                    </table>
                                </li>
                            </ul>
                        </div>
                    <div class="pager">
                    </div>
                </div>
               <div class="post-right">
                    <div class="film">
                       <embed type=application/x-shockwave-flash 
                            src=http://img188.imageshack.us/img188/2453/dreamlifemediaplay.swf?file=H:\me.mp3&image=./Images/hinhnen.jpg&autostart=1&repeat=always&?http://i465.photobucket.com/support/http://vn.myblog.yahoo.com/beautiful-dream 
                            style="width: 362px; height: 235px"></embed>
                    </div>
                    <div class="img_nav_right">
                        <div>Lorem ipsum dolor amet,
                                    consectetur adipiscing elit. P Lorem ipsum dolor amet,
                                    consectetur adipiscing elit. P</div>
                        <ul class="img_slide_right">
                            <li>
                                <table>
                                    <tr>
                                        <asp:Image ID="Image26" runat="server" Height="100px" Width="100px" />
                                    </tr>
                                    <span style="font-size: 12px">Lorem ipsum dolor amet, consectetur adipiscing elit. P</span>
                                </table>
                            </li>
                            <li>
                                <table>
                                    <tr>
                                        <asp:Image ID="Image27" runat="server" Height="100px" Width="100px" />
                                    </tr>
                                    <span style="font-size: 12px">Lorem ipsum dolor amet, consectetur adipiscing elit. P</span>
                                </table>
                            </li>
                            <li>
                                <table>
                                    <tr>
                                        <asp:Image ID="Image28" runat="server" Height="100px" Width="100px" />
                                    </tr>
                                    <span style="font-size: 12px">Lorem ipsum dolor amet, consectetur adipiscing elit. P</span>
                                </table>
                            </li>
                           
                        </ul>
                    </div>
                    <div class="pager">
                    </div>
                </div>
                <div class="post-right">
                    <div class="navi-right">
                        <div class="title-bar-right">
                            Quan điểm thiết kế kiến trúc của ispace
                        </div>
                    </div>
                    <div class="img_nav_right2">
                        <div class="img_slide_right2">
                            <asp:Image ID="Image1" runat="server" ImageUrl="images/sanpham/home_slide.png" Height="100px"
                                Width="136px" />
                        </div>
                        <div class="description2">
                            <span style="color: #0a4e51; font-size: 12px; font-weight: bold">Lorem ipsum dolor amet,
                                consectetur adipiscing elit. P</span><br />
                            <p />
                            <span style="font-size: 12px">Lorem ipsum dolor amet, consectetur adipiscing elit. P</span>
                        </div>
                    </div>
                    <div class="img_nav_right2">
                        <div class="img_slide_right2">
                            <asp:Image ID="Image10" runat="server" ImageUrl="images/sanpham/home_slide.png" Height="100px"
                                Width="136px" />
                        </div>
                        <div class="description2">
                            <span style="color: #0a4e51; font-size: 12px; font-weight: bold">Lorem ipsum dolor amet,
                                consectetur adipiscing elit. P</span><br />
                            <p />
                            <span style="font-size: 12px">Lorem ipsum dolor amet, consectetur adipiscing elit. P</span>
                        </div>
                    </div>
                    <div class="pager" style="text-align: right; color: Red; padding: 5px; text-decoration: underline">
                        <asp:HyperLink ID="HyperLink2" runat="server">Xem tất cả</asp:HyperLink>
                    </div>
                </div>
            </div>
        </div>
</div>

</asp:Content>

C#

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="slideproduct.ascx.cs" Inherits="ispace.controls.slideproduct" %>
    <ul id="slideshow">
		<li>
			<h3>TinySlideshow v1</h3>
			<span>photos/orange-fish.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="thumbnails/orange-fish-thumb.jpg" alt="Orange Fish" /></a>
		</li>
		<li>
			<h3>Sea Turtle</h3>
			<span>photos/sea-turtle.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<img src="thumbnails/sea-turtle-thumb.jpg" alt="Sea Turtle" />
		</li>
		<li>
			<h3>Red Coral</h3>
			<span>photos/red-coral.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="thumbnails/red-coral-thumb.jpg" alt="Red Coral" /></a>
		</li>
		<li>
			<h3>Coral Reef</h3>
			<span>photos/coral-reef.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="thumbnails/coral-reef-thumb.jpg" alt="Coral Reef" /></a>
		</li>
		<li>
			<h3>Blue Fish</h3>
			<span>photos/blue-fish.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<img src="thumbnails/blue-fish-thumb.jpg" alt="Blue Fish" />
		</li>
		<li>
			<h3>TinySlideshow v.2</h3>
			<span>photos/yellow-fish.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="thumbnails/yellow-fish-thumb.jpg" alt="Yellow Fish" /></a>
		</li>
		<li>
			<h3>Squid</h3>
			<span>photos/squid.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="thumbnails/squid-thumb.jpg" alt="Squid" /></a>
		</li>
		<li>
			<h3>Small Fish</h3>
			<span>photos/small-fish.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="thumbnails/small-fish-thumb.jpg" alt="Small Fish" /></a>
		</li>
	</ul>
	<div id="wrapper">
		<div id="fullsize">
			<div id="imgprev" class="imgnav" title="Previous Image"></div>
			<div id="imglink"></div>
			<div id="imgnext" class="imgnav" title="Next Image"></div>
			<div id="image"></div>
			<div id="information">
				<h3></h3>
				<p></p>
			</div>
		</div>
		<div id="thumbnails">
			<div id="slideleft" title="Slide Left"></div>
			<div id="slidearea">
				<div id="slider"></div>
			</div>
			<div id="slideright" title="Slide Right"></div>
		</div>
	</div>

please help me!. i very need for this problem

Posted 24-Jun-12 1:55am

bachdienquan

Updated 24-Jun-12 2:52am

v2

Add a Solution

Comments

Sandeep Mewara 24-Jun-12 8:37am

Elaborate 'not working'. We cannot work out what you are trying to ask from the post.
Use the "Improve question" link to edit your question and provide better information.

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

jkirkerx · Answer 1 · 2012-06-24T12:07:00

First off, the design view in visual studio is only for previewing how your HTML will look, and for defining parameters and properties for control objects. So the design view will not run your java script slideshow. You have to run the page through a server in order to get full functionality of your work.

If I misread your post, and your saying that the slideshow does not work correctly each time, then I think you need to move this script from the head tag to within the body tag, I assume your pointing to your Jquery in the masterpage head tag.

<script type="text/javascript">
    $('slideshow').style.display = 'none';
    $('wrapper').style.display = 'block';
    var slideshow = new TINY.slideshow("slideshow");
    window.onload = function() {
        slideshow.auto = true;
        slideshow.speed = 5;
        slideshow.link = "linkhover";
        slideshow.info = "information";
        slideshow.thumbs = "slider";
        slideshow.left = "slideleft";
        slideshow.right = "slideright";
        slideshow.scrollSpeed = 4;
        slideshow.spacing = 5;
        slideshow.active = "#fff";
        slideshow.init("slideshow", "image", "imgprev", "imgnext", "imglink");
    }
</script>

Third,

the code in the 2nd example looks shaky to me. You seem to be missing the image element. I don't know how slideshow works, but it looks like it's dependent on the 5 elements in the line below. Make sure that they exist, and that the tags have the proper ID names in then.

slideshow.init("slideshow", "image", "imgprev", "imgnext", "imglink");

bachdienquan · Answer 2 · 2012-06-25T14:57:00

Solution 2

you can see it at http://sandbox.scriptiny.com/javascript-slideshow[^]. Beside that, i move script into head of master page... but it don't work ,too.... aaa. every one help me...

Posted 25-Jun-12 14:57pm

bachdienquan

Comments

jkirkerx 26-Jun-12 17:47pm

I said move it into the body tag. And that your missing a element tag with id in slideshow.init, I think it was image

jkirkerx 26-Jun-12 17:59pm

OK, I went to the link, and right clicked and viewed the browser source, and cleary all the script code is in the body. The head tag is for declaring the location of static script code.

Since I can't see your masterpage, I can't tell if you declared the proper scripts in teh head tag.

If you have an error in your credit card script, then all the scripts will halt, or stop running, and the slideshow will not run.

So run it in IE, and see if the little yellow flag appears in the lower left corner, indicating you have a script error.

bachdienquan · Answer 3 · 2012-06-26T14:56:00

Solution 3

thanks you very much for your answer.my script has an error. based on your direction of instructions. i's configuration. once again, thanks you for help me.

Posted 26-Jun-12 14:56pm

bachdienquan

how to using jquery gallary in project asp.net?.

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us