jQWidgets Forums

Tagged: Angular scroll view, buttonsOffset, image, jQuery scroll view, jqxScrollView, property name, Scroll view

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

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

Author

jQueryScrollView Not Working Posts

February 3, 2016 at 2:09 pm jQueryScrollView Not Working #81079

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

February 4, 2016 at 6:31 am 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/

February 4, 2016 at 2:05 pm 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

February 5, 2016 at 6:33 am jQueryScrollView Not Working #81144

Dimitar

Participant

Hi Steve,

What you also need to change is slideShow: True → slideShow: 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/

February 5, 2016 at 5:16 pm jQueryScrollView Not Working #81178

SteveLFL

Participant

Thanks… works like a charm.

Author

Posts

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

You must be logged in to reply to this topic.