"Use jquerytools to create a dynamic play/pause button functionality for scrollable content

Greetings! I am currently working on creating a slide using Jquerytools. Here are some helpful links for reference:

To view the gallery demonstration, please visit:

For information on autoscroll functionality, check out:

If you'd like to see my code and progress, feel free to visit this link: http://jsfiddle.net/PcAwU/

I'm facing an issue with merging the Play & Pause buttons. I want only one button active at a time - either Play or Pause. Any tips on how to achieve this would be greatly appreciated.

Additionally, I'd like to change the button implementation from:

<button type="button" onClick="api.play()">Play</button>

To using image buttons like:

<a href="#"  onClick="api.play()" ><img src="#"></a>

If you could provide me with the correct syntax for this conversion, it would be very helpful.

Lastly, I attempted to replace the "click" event with "hover" in a certain section of my code to trigger actions on hover instead. However, I encountered a problem where the first image wouldn't show up upon page load, causing a malfunction. This occurs in the following segment:

This line is where I changed "click" to "hover":

$(".items img").click(function() {
javascriptjqueryslidejquery-toolsscrollable

Answer №1

Solved using 

<script>
$(function() {
var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true });

$(".items img").click(function() {
    // checking if same thumb is being clicked
    if ($(this).hasClass("active")) { return; }

    // finding large image's URL based on the thumbnail URL (flickr specific)
    var url = $(this).attr("src").replace("_t", "");

    // getting element that wraps the image and making it semi-transparent
    var wrap = $("#image_wrap").fadeTo("medium", 0.5);

    // loading the large image from www.flickr.com
    var img = new Image();


    // executing this function after image loads
    img.onload = function() {

        // making wrapper fully visible
        wrap.fadeTo("fast", 1);

        // changing the image
        wrap.find("img").attr("src", url);

    };

    // starting to load the image from www.flickr.com
    img.src = url;

    // activating item
    $(".items img").removeClass("active");
    $(this).addClass("active");

// simulating a "click" on the first image when page loads
}).filter(":first").click();

// providing scrollable API for the action buttons
window.api = root.data("scrollable");

});


function toggle(el){
    if(el.className!="play")
    {
        el.className="play";
         el.src='images/play.png';
        api.pause();
    }
    else if(el.className=="play")
    {
        el.className="pause";
         el.src='images/pause.png';
        api.play();
    }

    return false;
}

</script>

And here are the buttons:

<input type="image" src="images/atras.png" onclick="api.prev()" >

   <input type="image" src="images/pause.png" class="pause" onclick="toggle(this);" >

   <input type="image" src="images/adelante.png" onclick="api.next()" >

Hopefully, someone finds this helpful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript: Only a single function call is successful

Recently, I encountered an issue with my registration form. Everything was working smoothly until I attempted to add a new onblur() event to a different text field within the same form. Surprisingly, this caused the original ajax call to stop functioning, ...

javascriptajax

Guide to custom sorting and sub-sorting in AngularJS

If I have an array of objects like this: [ { name: 'test1', status: 'pending', date: 'Jan 17 2017 21:00:23' }, { name: 'test2', sta ...

javascriptangularjssortingangularjs-ng-repeat

Is there a way to transform time into a percentage with the help of the moment

I am looking to convert a specific time range into a percentage, but I'm unsure if moment.js is capable of handling this task. For example: let start = 08:00:00 // until let end = 09:00:00 In theory, this equates to 100%, however, my frontend data ...

javascriptnode.jsangulartypescriptmomentjs

Starting a tab just once

I have successfully created 4 static HTML pages that include: Home About Services Contact Each page contains a link that leads to another static page named myVideo.html, which plays a video about me in a new tab. The link is available on every page so ...

javascriptphpjqueryhtml

Tips for programmatically inserting an identifier attribute within an array of objects?

Within a simple section, I have implemented a feature where users can input movie details using a form. The values entered by the users are used to create objects, which are then pushed into an array. However, I am looking to assign a unique and dynamic ID ...

javascriptjqueryarrays

The addition of a slash between the hashtag and the anchor name by Fullpage.js is causing conflicts with ng-include

My experience with using fullpage.js on a simple site alongside angular directives has been met with an issue. When including a .phtml file, the anchor functionality of fullpage.js stops working as it adds a slash before and after the anchor name. UPDATE ...

javascriptjqueryangularjsfullpage.js

Replacing an array element in React.js

Here is a React.js code snippet where I am trying to utilize an array called distances from the file Constants.js in my Main.js file. Specifically, I want to replace the APT column in the sampleData with a suitable value from the array distances extracted ...

javascripthtmlreactjsmaterial-ui

Converting Large XLSX File (over 600MB) to CSV Using Node.js

Currently, I am facing an issue with converting a large XLSX file, which is over 600mb in size, to CSV format. The conversion process works perfectly fine with smaller files that are less than 3MB. However, when it comes to larger files, the program star ...

javascriptnode.jsexcelcsvxlsx

Issues with jQuery spinner not currently active

For quite some time, I had this code working perfectly in my Rails application: $(function () { // Modifying the link's icon while the request is in progress $(document).on('click', 'a[data-remote]', function () { ...

javascriptjqueryruby-on-railsajax

Count of jSon objects

After receiving a string st from a web service, I convert it into an object. How can I determine the number of arrays inside this object? In this particular case, there are 2 arrays. var st = "{[{"Name": "fake", "Address": "add"]},[{"Name": "fake", "Addre ...

javascriptjson

Rows in a table will not decrease when added anew

On a page that allows adding and deleting rows from a table of input fields, the following code functions properly for existing fields. However, when attempting to add new rows and delete them in a sequential manner that requires replacing the ID and name ...

javascriptjquery

Reading Properties in VueJS with Firebase

<template> <div id="app"> <h1 id="title"gt;{{ quiz.title }}</h1> <div id="ques" v-for="(question, index) in quiz.questions" :key="question.text"> <div v-show="index = ...

javascripthtmlcssfirebasevue.js

Sending a List of objects to an MVC controller via jQuery Ajax is not supported

Trying to pass two parameters to an MVC controller method for saving data to a MS SQL Server database via an Ajax request. The method should receive an int and a List of complex objects, but it only gets the int parameter and the List remains null. Here&a ...

jquerysql-serverajaxasp.net-mvc-4

Calling Ajax in JavaScript

Trying to fetch a value in JavaScript using an Ajax Call, The code being used is as follows: <script> var value = $.ajax({ type:"GET", url:"get_result.php", data:"{'abc':" + $abc + "}", }); alert(val ...

javascriptajax

I am having trouble with $(this) in my jQuery click event handler

When I click my function, I want to change a parent element that contains this function. However, $(this) is not working. What could be the issue? function accountConfirm(message, title, yes_label, no_label, callback) { console.log($(this)); $(&qu ...

javascriptjquery

"PHP, AJAX, and JavaScript work together to run a loop that processes only the final element

Hello everyone, I need assistance in saving data from a loop. Here is the code snippet that I am working with: <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> ...

javascriptphpjqueryarraysajax

There are three pop-up windows displayed on the screen. When each one is clicked, they open as intended, but the information inside does not

Every button triggers a unique modal window Encountering an unusual problem with Bootstrap 5 modal functionality. Within a webpage displaying a list of database entries (refer to the screenshot), each entry features three buttons to open corresponding mod ...

javascriptbootstrap-modalbootstrap-5

Guide to submitting a form with an image upon pressing a button

I am working with the following HTML structure: <form id="form" enctype="multipart/form-data"> <div class="row"> <div class="col"> <div class="mb-3"> ...

javascriptjqueryajax

Utilize the $scope variable as a JSON object for interacting with the $http service

Is there a way to extract all the data from Angular's scope service without creating an additional object? I am trying to send everything on the scope to a server using $http.post, but it seems that $scope is a circular structure, resulting in "Conver ...

javascriptangularjs

Is it possible for a Vue.js build to encounter errors due to unregistered components?

Exploring a component template... <template> <Unknown></Unknown> </template> In the context of this template, Unknown could be either a globally registered component or not. Upon encountering this scenario at runtime, an informa ...

javascriptvue.jsvuejs2