Jump to content

Creating a carousel with url links

Guesty81

By Guesty81
in Learn / Play / Progress

 Share

Recommended Posts

Guesty81 Froggy

Guesty81

Posted
Posted

Hi

I am wanting to create a carousel on my front page so that when a user clicks on it; it will take them onto the respective page that the image links to. I initially looked at the widget you can add called carousel, but it doesn't seem to allow for this so I have used the software wow slider which when you create the slider it needs you to access the header and body of the site in html.

Quote

 

Upload these folders to your server

  • data1/
  • engine1/
  • Current location: /Users/Work/Documents. 
    These folders should be located in the same folder as your html page

2Paste this code to your page between the tags <head></head>
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
Paste this code to your page between the tags <body></body> 

in the place that you want the slider to appear
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
        <li><a href="http://hospitalschool-manchester.frogos.net/d1aa8cd4e1ec805cf816bbce697f0c0c/manchester-poem" target="_blank"><img src="data1/images/screen_shot_20170831_at_16.34.12.png" alt="This is Manchester" title="This is Manchester" id="wows1_0"/></a></li>
        <li><a href="http://hospitalschool-manchester.frogos.net/d1aa8cd4e1ec805cf816bbce697f0c0c/logo-a-go-go" target="_blank"><img src="data1/images/screen_shot_20170831_at_19.14.42.png" alt="Logo a Go Go!" title="Logo a Go Go!" id="wows1_1"/></a></li>
        <li><a href="http://hospitalschool-manchester.frogos.net/app/os?site=baaa92de57db9ea8f4cf1e49e6ba4fb8#" target="_blank"><img src="data1/images/screen_shot_20170902_at_23.05.45.png" alt="Read the Latest Word!" title="Read the Latest Word!" id="wows1_2"/></a></li>
        <li><a href="http://hospitalschool-manchester.frogos.net/app/os?site=baaa92de57db9ea8f4cf1e49e6ba4fb8&page=new-page" target="_blank"><img src="data1/images/screen_shot_20170902_at_23.12.57.png" alt="Login to Frog & See What's happening" title="Login to Frog & See What's happening" id="wows1_3"/></a></li>
    </ul></div>
    <div class="ws_thumbs">
<div>
        <a href="#" title="This is Manchester"><img src="data1/tooltips/screen_shot_20170831_at_16.34.12.png" alt="" /></a>
        <a href="#" title="Logo a Go Go!"><img src="data1/tooltips/screen_shot_20170831_at_19.14.42.png" alt="" /></a>
        <a href="#" title="Read the Latest Word!"><img src="data1/tooltips/screen_shot_20170902_at_23.05.45.png" alt="" /></a>
        <a href="#" title="Login to Frog & See What's happening"><img src="data1/tooltips/screen_shot_20170902_at_23.12.57.png" alt="" /></a>
    </div>
</div>
<div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.net">html5 slideshow</a> by WOWSlider.com v8.8m</div>
<div class="ws_shadow"></div>
</div>    
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->

 

Is this even possible as all I have is the html widget to access html. I'm very new to this so if this is simple please excuse these simplicity, but I really could do with some help. I don't understand how I can upload the folders required to the same place as my site as this isn't an option through the my sites area. If there's an option to add links to the carousel widget that would be great, again any help would be brilliant.

Thanks again,

Chris


 

Link to comment
Share on other sites
ADT Mentor

ADT

Posted
Posted
49 minutes ago, Graham Quince said:

Hi @Guesty81,

i think you will be best off trying this as a FrogCode widget.  Uploading file into FrogCose does not change their file name, so you'll be able to point to the folders.  You'll also be able to set up I,age uploads and site or page links.

hope that helps,

Graham

Working on a Sunday...  that's dedication!!! :P

  • Sad 1
Link to comment
Share on other sites
Guesty81 Froggy

Guesty81

Posted
  • Author
Posted

Thanks for that quick response, I'll give it a go and post my results. I think it would make a great widget  - a carousel that you could add URL links to. You see them all the time on websites and having such a widget would allow creators on frog to achieve that 'look' if they wished (I'd personally love the ability to integrate Wordpress then I'd be fine lol) Thanks again for the help :)

 

Link to comment
Share on other sites
Guesty81 Froggy

Guesty81

Posted
  • Author
Posted

Tried to add it this way, but it's not accepting it. Argggh  there's got to be a simpler way I just want it to slide between the images and allow people to click on them and then it will take the user to that page. It would be great if the frog site had some more tutorials for common features that you might want to add onto a page.

 

Link to comment
Share on other sites
Guesty81 Froggy

Guesty81

Posted
  • Author
Posted

So I've got a lot closer to what I wanted to achieve. My page now looks like this (I've attached the image) I used the file drop method set out in your tutorials. 

Quote

 

<style>
.carousel-fade .carousel-inner .item {
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-control {
    z-index: 2;
}
.carousel-inner img {
    max-width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    min-width: 300px;
}
.carousel-arrow-left,
.carousel-arrow-right {
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 15px;
    margin-top: -15px;
}
.carousel-arrow-right {
    left: 35%;
    border-left-color: #FFFFFF;
}
.carousel-arrow-left {
    right: 35%;
    border-right-color: #FFFFFF;
}
</style>
<div id="Carousel" class="carousel slide carousel-fade col-lg-8 col-offset-2">
    <ol id="filedrop-slide-show-count" class="carousel-indicators">
    </ol>
    <div id="filedrop-slide-show-img" role="listbox" class="carousel-inner">
    </div>
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#Carousel" data-slide="prev">
        <span class="carousel-arrow-left"></span>
    </a>
    <a class="right carousel-control" href="#Carousel" data-slide="next">
        <span class="carousel-arrow-right"></span>
    </a>
</div>

<script type="text/javascript">
$('.carousel').carousel();
var baseURL = Frog.Utilities.getBaseUrl(),
    // Change fileDropUuid to the UUID of your file drop widget
    fileDropUuid = '532ED97C20028F1862701F16504E9D038E36297C99660289';
Frog.Model
    .api('filedrop.get', {
        filedrop: fileDropUuid
    }).done(function(filesResponse) {
        var $fileList = $('#filelist'),
            $slideShowCount = $("#filedrop-slide-show-count"),
            $slideShowImageContainer = $("#filedrop-slide-show-img"),
            fileCount = 0;
        filesResponse.data.resources.forEach(function(file, index) {
            // Check whether the file is one of these filetypes; Want to add more? Add to the array
            if (['jpg', 'jpeg', 'gif', 'png'].indexOf(file.file.ext.toLowerCase()) > -1) {

                $slideShowCount
                    .append(
                        $('<li>')
                        .attr('data-target', 'Carousel')
                        .attr('data-slide-to', fileCount)
                        .addClass(function() {
                            if (fileCount === 0) {
                                return 'active';
                            }
                        })
                    );
                $slideShowImageContainer
                    .append(
                        $('<div>').addClass('item')
                        .addClass(function() {
                            if (fileCount === 0) {
                                return 'active';
                            }
                        })
                        .append(
                            $('<img />').addClass('img-responsive')
                            /* ?width=400&height=500 this addition creates a new image on your Frog server at 400 pixels wide by 500 pixels high.  This prevents the gallery from serving much larger pictures than required - which can cause your Frog to slow down */
                            .attr('src', baseURL + '/app/file/resource/' + file.file.uuid + '?width=400&height=500')
                            .attr('align', 'center')
                        )
                    );
                fileCount++;
            }
        });
    });

 

I want to link this with a news page on the site so that if they click on the images they are taken to our stories. I thought it would be possible to add 

Quote

<a href="url"><img src="image" alt="alt"></a>

But the individual images don't seem to be listed. This is probably a very simple thing, but if someone could post the html I would need I'd be very grateful.

 

Thanks again

Screen Shot 2017-09-03 at 20.54.39.png

Link to comment
Share on other sites
pconkie Mentor

pconkie

Posted
Posted

The bit you want to change is $slideshowimagecontainer.append()

this section loads each image from the filedrop and displays it i the screen.  Certainly easy enough to wrap each image in an anchor link.

BUT not sure where your URL is going to come from? Does each image link to a different URL? I don't think there will be any link between the image URL and the URL of a site that the widget could use. 

@Graham Quince did you say the other day someone had made a widget that read from a text file? You could do it this way with image and URL pairs in the text file

Link to comment
Share on other sites
Graham Quince Grand Frogger

Graham Quince

Posted
Posted
1 hour ago, pconkie said:

The bit you want to change is $slideshowimagecontainer.append()

this section loads each image from the filedrop and displays it i the screen.  Certainly easy enough to wrap each image in an anchor link.

BUT not sure where your URL is going to come from? Does each image link to a different URL? I don't think there will be any link between the image URL and the URL of a site that the widget could use. 

@Graham Quince did you say the other day someone had made a widget that read from a text file? You could do it this way with image and URL pairs in the text file

This was the code Jenny Vosper (now teaching English in Japan) and I worked out for her unfinished Phrase of the Day widget: 

if(this.prefs.txtfile.value === undefined){
                this.element.find('.phrase').text("No phrase set");
            }else{
            jQuery.get(this.prefs.txtfile.value, function(data) {

                var myarray=data.split("|"),
                    startDate = moment(this.prefs.date.value, 'DD/MM/YYYY'),
                    currentDate = moment(),
                    dayDifference = this.datereset(currentDate.diff(startDate, 'days'),myarray.length);


                this.element.find('.phrase').text(myarray[dayDifference]);
             //  process text file line by line
             }.bind(this));
            }

It might be easier though - to name the images for the urls you want the links to go to - and then use the image name to as the href.

Alternatively, instead of using the FileDrop, you could hard code the images and links.

@ADT - I usually check in a couple of times out of hours, just in case there's any problems.

  • Like 1
Link to comment
Share on other sites
pconkie Mentor

pconkie

Posted
Posted

@Guesty81 

@Graham Quince suggestion is the most sensible way forward.  You just need to be careful uploading files as frog tends to rename them if they have ever been uploaded before!

I have the following set-up...

1.thumb.png.bf40532d6e1ba4f1a601b871025b969c.png

 

Of course the filedrop would normally be hidden, but you can hopefully see that i have named the images according to the site i want them to open.

I have amended the code you were last working with so that each image has a link added to it using the filename as the link url. This is just the script section (the html and style is unchanged).  Don't forget to change the filedrop uuid again! 

$('.carousel').carousel();
var baseURL = Frog.Utilities.getBaseUrl(),
    // Change fileDropUuid to the UUID of your file drop widget
    fileDropUuid = 'B6812D8120028F73DEC8AFC28E9436018A2C42AC449BD34C';
Frog.Model
    .api('filedrop.get', {
        filedrop: fileDropUuid
    }).done(function(filesResponse) {
        var $fileList = $('#filelist'),
            $slideShowCount = $("#filedrop-slide-show-count"),
            $slideShowImageContainer = $("#filedrop-slide-show-img"),
            fileCount = 0;
        filesResponse.data.resources.forEach(function(file, index) {
            if (['jpg', 'jpeg', 'gif', 'png'].indexOf(file.file.ext.toLowerCase()) > -1) {
                $slideShowCount
                    .append(
                        $('<li>')
                        .attr('data-target', 'Carousel')
                        .attr('data-slide-to', fileCount)
                        .addClass(function() {
                            if (fileCount === 0) {
                                return 'active';
                            }
                        })
                    );
                $slideShowImageContainer
                    .append(
                        $('<div>').addClass('item')
                        .addClass(function() {
                            if (fileCount === 0) {
                                return 'active';
                            }
                        })
                        .append(
                          $('<a>').attr('href', 'http://www.'+file.file.name)
                            .html(
                            $('<img />').addClass('img-responsive')
                            .attr('src', baseURL + '/app/file/resource/' + file.file.uuid + '?width=400&height=500')
                            .attr('align', 'center')
                            )
                        )
                    );
                fileCount++;
            }
        });
    });

 

Hopefully that does the trick!

Paul.

 

  • Thanks 1
Link to comment
Share on other sites
Graham Quince Grand Frogger

Graham Quince

Posted
Posted
11 hours ago, pconkie said:

@Guesty81 

@Graham Quince suggestion is the most sensible way forward.  You just need to be careful uploading files as frog tends to rename them if they have ever been uploaded before!

If you add a split to remove any _1 from the file names, something like: 

                        .append(
                          var link = file.file.name.split('_');
                          $('<a>').attr('href', 'http://www.'+link[0])
                            .html(
                            $('<img />').addClass('img-responsive')
                            .attr('src', baseURL + '/app/file/resource/' + file.file.uuid + '?width=400&height=500')
                            .attr('align', 'center')
                            )

Then you should be able to get around that issue.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...