HTML & Javascript Image

326
November 26, 2016, at 7:33 PM

I've been playing around and learning coding for about 2 months now and was looking into coding a website with a fullscreen image slider. However, have tried searching on the web for solutions to no avail.

I would like to check if it's possible to change the image sourcing from a URL to sourcing from local disk and how do I do that? Have tried using the HTML methods as well but Dreamweaver had notified for syntax error.

Below is a JavaScript code in HTML.

<!-- Script for Image Background -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="slideshow_theme/supersized.shutter.min.js"></script>
<script type="text/javascript">
    jQuery(function ($) {
        $.supersized({
            // Functionality
            slide_interval: 10000,    // Length between transitions
            transition: 1,            // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
            transition_speed: 1000,   // Speed of transition
            // Components
            slide_links: 'blank',     // Individual links for each slide (Options: false, 'num', 'name', 'blank')
            slides: [                 // Slideshow Images
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title: 'Image Credit: Maria Kazvan', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url: 'http://www.nonsensesociety.com/2011/04/maria-kazvan/' },
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title: 'Image Credit: Maria Kazvan', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url: 'http://www.nonsensesociety.com/2011/04/maria-kazvan/' },
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title: 'Image Credit: Maria Kazvan', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url: 'http://www.nonsensesociety.com/2011/04/maria-kazvan/' },
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title: 'Image Credit: Colin Wojno', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url: 'http://www.nonsensesociety.com/2011/03/colin/' },
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title: 'Image Credit: Colin Wojno', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url: 'http://www.nonsensesociety.com/2011/03/colin/' },
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title: 'Image Credit: Colin Wojno', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url: 'http://www.nonsensesociety.com/2011/03/colin/' },
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title: 'Image Credit: Brooke Shaden', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url: 'http://www.nonsensesociety.com/2011/06/brooke-shaden/' },
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title: 'Image Credit: Brooke Shaden', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url: 'http://www.nonsensesociety.com/2011/06/brooke-shaden/' },
                { image: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title: 'Image Credit: Brooke Shaden', thumb: 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url: 'http://www.nonsensesociety.com/2011/06/brooke-shaden/' }
            ]
        });
    });
</script>
Answer 1

Well, probably just replace 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg' with 'kazvan-1.jpg' and put the JPEG-file in the same folder as the HTML and JavaScript files.

If this doesn't work, you need to post more code to show what happens to the JSON object you're posting here.

Rent Charter Buses Company
READ ALSO
CKEditor doesn&#39;t show content

CKEditor doesn't show content

I have problem with CKEditorI use setData() method to put content into editor

285
How to use Materialize css Tabs in Meteor?

How to use Materialize css Tabs in Meteor?

New to Meteorjs and the Materialize CSS Framework

641