This topic contains 4 replies, has 2 voices, and was last updated by  SteveLFL 4 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • jQueryScrollView Not Working #81079

    SteveLFL
    Participant

    I’m having a problem with the example of the jQueryScrollView control. I’ve copied everything from the example except I’m referencing local images that I want to use in my web site. The only exception is that I’m using the W3-container for the outermost <DIV> of the page, as this is what we will be using throughout the site This page will be the home page for our church preschool site that I’m developing. When I run the page the three images just run down the page in sequence, i.e.
    [Image01]
    [Image02]
    [Image03]

    Here’s the code:

    
    <!DOCTYPE html>
    <title>Our Preschool Name</title>
    <html>
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    	<link rel="stylesheet" href="http://OurRootURL.org/jqwidgets/styles/jqx.base.css" type="text/css" />
    	<link rel="stylesheet" href="http://OurRootURL.org/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
    	<script type="text/javascript" src="http://OurRootURL.org/scripts/jquery-1.11.1.min.js"></script>
    	<script type="text/javascript" src="http://OurRootURL.org/jqwidgets/jqxcore.js"></script>	
    	<script type="text/javascript" src="http://OurRootURL.org/jqwidgets/jqxscrollview.js"></script>	
    	<script type="text/javascript" src="http://OurRootURL.org/jqwidgets/jqxbuttons.js"></script>	
    	<script type="text/javascript">
    		$(function () {
    				$('#photoGallery').jqxScrollView({ width: 1370, height: 595, buttonOffset: [0, 0], slideShow: True });	
    		});
    	</script>
    	<style type="text/css">
    		.photo
    		{
    				width: 1370px;
    				height: 595px;
    				background-color: #000;
    				background-position: center;
    				background-repeat: no-repeat:
    		}
    
    		p.small {
    		    line-height: 0.90;
    		}	
    	</style>
    
    	<body class="default">
    		<div class="w3-container w3-white" id="photoGallery">
    				<div><div class="photo" style="background-image: url(images/PreSchool01.png)"></div></div>
    				<div><div class="photo" style="background-image: url(images/PreSchool02.png)"></div></div>
    				<div><div class="photo" style="background-image: url(images/PreSchool03.png)"></div></div>
    		</div>
    	</body>
    </html>
    

    Once I get this part working I want to eliminate the buttons so that the person viewing the site doesn’t have to click to see all the pages. I’m guessing that just eliminating all references to them is all that I need do.

    Any help would be appreciated.

    Steve

    • This topic was modified 4 years, 2 months ago by  Peter Stoev. Reason: Moved to ScrollBar Froum
    jQueryScrollView Not Working #81101

    Dimitar
    Participant

    Hello Steve,

    Please correct “buttonOffset” in your code to buttonsOffset, the real name of this property. The issue should be gone afterwards, but if not, please contact us again and share if there are any errors thrown in your browser’s console.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    jQueryScrollView Not Working #81120

    SteveLFL
    Participant

    Thanks, Dimitar. I made the correction you suggested but that did not solve my problem. I am still seeing all three images on a single page. No errors were reported by the browser. Is there anything else I can try?

    Steve

    jQueryScrollView Not Working #81144

    Dimitar
    Participant

    Hi Steve,

    What you also need to change is slideShow: TrueslideShow: true (JavaScript is a case-sensitive language). Here is a fixed version of your example that works fine on our side:

    <!DOCTYPE html>
    <title>Our Preschool Name</title>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.darkblue.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollview.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript">
            $(function ()
            {
                $('#photoGallery').jqxScrollView({ width: 1370, height: 595, buttonsOffset: [0, 0], slideShow: true });
            });
        </script>
        <style type="text/css">
            .photo
            {
                width: 1370px;
                height: 595px;
                background-color: #000;
                background-position: center;
                background-repeat: no-repeat:;
            }
            
            p.small
            {
                line-height: 0.90;
            }
        </style>
    </head>
    <html>
    <body class="default">
        <div class="w3-container w3-white" id="photoGallery">
            <div>
                <div class="photo" style="background-image: url(../../images/imageNature1.jpg)">
                </div>
            </div>
            <div>
                <div class="photo" style="background-image: url(../../images/imageNature2.jpg)">
                </div>
            </div>
            <div>
                <div class="photo" style="background-image: url(../../images/imageNature3.jpg)">
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    jQueryScrollView Not Working #81178

    SteveLFL
    Participant

    Thanks… works like a charm.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.