"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

Modify KeyboardDatePicker to display the full name of the day and month

Date Selector Hey there, I'm looking to modify the date format from Wed, Apr 7 to Wednesday, April 7. Is there a way to display the full name of the day and month instead of the short abbreviation? ...

javascriptreactjsmaterial-ui

What's causing jQuery to make the entire page malfunction?

I am experiencing an issue where a function is not recognized as being in scope when I have a reference to jQuery defined. Oddly enough, if I comment out that reference, the function call works just fine. I have other pages set up the same way with jQuer ...

javascriptjqueryhtml

Problem with image title in jQuery mobile

My code seems to be having an issue where the title does not display completely when hovering over it. For example, if the title is set as "The Value", only "The" is shown and not "The Value". Can anyone help me identify the mistake? Thank you in advance ...

javascriptjqueryhtmlcssjquery-mobile

After transitioning my Image Modal from an ID to a Class, it appears to not be functioning properly

I recently implemented an image modal on my website using the ID attribute, but it didn't seem to work as expected. After changing the id to a class, now the image modal is not functioning at all and I'm struggling to figure out what went wrong. ...

javascriptphphtml

Complete the dynamic form submission in a non-blocking manner

My goal is to dynamically add text fields with the click of a button I also aim to extract data from these text fields and insert it into the database Currently, all functions work smoothly, I just need this additional feature. Per ...

javascriptphpjquerymysqlajax

observing the value of the parent controller from the UI router state's resolve function

I am facing an issue in my AngularJS application while using ui-router. There are three states set up - the parent state controller resolves a promise upon a successful request, and then executes the necessary code. In the child state portfolio.modal.pate ...

javascriptangularjsangular-ui-router

Is it possible for jquery to run an entire HTML file using ajax?

Based on information from a discussion on Stack Overflow, it seems that I can utilize the jquery getScript() method to run a remote JavaScript file loaded via Ajax. However, in my specific scenario, the script file is located within an HTML file. Is ther ...

javascriptjqueryhtmlajax

Javascript menu toggle malfunctioning with sub-menus

I am in the process of creating a responsive menu for a complex website. The horizontal menu transitions into a vertical layout on smaller screens, with javascript used to toggle the sub-menu items open and closed when clicked. One issue I am facing is wit ...

javascriptjqueryhtmlcssmenu

Enhance the efficiency of traversing a lengthy list of comparisons within an array.filter method

I am struggling with finding an efficient method to filter out items from an array of objects based on two specific attributes matching those of the last 6 items of another array. Currently, I have a manual process in place which results in cumbersome and ...

javascriptarraysfunctional-programmingjavascript-objects

Incorporating PHP in JS/jQuery AJAX for creating unique odd and even conditional layouts

My PHP code includes a loop that changes the layout of elements based on whether the $count variable is odd or even. For odd counts, an image appears on the left and text on the right. For even counts, it's the other way around. To load content dynam ...

javascriptphpjqueryajax

How can you conceal an HTML element when the user is using an iOS device?

I need the code to determine if a user is using an iOS device and, if not, hide the HTML input type "Play" button. So, I'm uncertain whether my iOS detection is correct, the hiding of the "Play" button in the code, or both: <!DOCTYPE html> < ...

javascriptjqueryioshtml

Error: The code has a syntax issue due to an unexpected "function" token while using

Recently, I decided to try out Node version 6.2.1 with some of my code. My goal was to migrate the hyper-callback oriented codes to a cleaner and potentially more efficient approach. Surprisingly, when I attempted to run the node code in the terminal, an ...

javascriptnode.jsexpressasynchronousasync-await

Transforming a unirest 'GET' call into an axios request

I am currently utilizing TheRundown API to access sports data. The example provided to me makes use of unirest, but I am endeavoring to adapt that example into an axios request. While I have managed to make it work for the most part, my main challenge lies ...

javascriptreactjsapiaxiosnext.js

Sending data as a string in an AJAX request

I have been struggling with this coffeescript function that controls dynamic select boxes. I am trying to pass the content of "modelsSelect" to another script, but for some reason, it's not working as intended. customScript.coffee dynamicSelection = ...

javascriptjqueryruby-on-railsajaxcoffeescript

Transforming an Image URL into base64 format using Angular

I'm currently facing difficulty when attempting to convert a specified image URL into base64. In my scenario, I have a string that represents the image's path. var imgUrl = `./assets/logoEmpresas/${empresa.logoUrl}` Is there a way to directly co ...

javascriptangulartypescriptsingle-page-applicationangular8

Implementing a JavaScript file and ensuring W3C compliance

I recently purchased a template that included a javascript file in the main page with the following code: <script src="thefile.js?v=v1.9.6&sv=v0.0.1"></script> Upon inspection, I noticed there are two arguments at the end of the file ...

javascripthtmlw3c

Storing the blob received from an AJAX call into Azure Blob Storage may result in a corrupted image

When I send a PDF to my vendor's API, they return a .png file as a blob (note: see update 2 regarding the data type being returned). I want to store this in Azure Blob Storage. However, when using the code below, the uploaded file becomes corrupted. ...

javascriptajaxnode.jsexpressazure-blob-storage

Locate the element within the specified parameters using [protractor]

Here's my query: element.all(by.repeater('user in users')).then(function(rows) { // looking to locate an element in rows using CSS selector, for example } UPDATE : I want to clarify that I am trying to find an element using rows[rows.len ...

javascriptangularjsseleniumprotractore2e-testing

How do I navigate to the homepage in React?

I am facing an issue with my routes. When I try to access a specific URL like http://localhost:3000/examp1, I want to redirect back to the HomePage. However, whenever I type in something like http://localhost:3000/***, I reach the page but nothing is dis ...

javascripthtmlcssreactjsreact-router-dom

I am interested in creating an input range slider using React and TypeScript

This code was used to create a slider functionality import { mainModule } from 'process'; import React, { useState } from 'react'; import styled from 'styled-components'; const DragScaleBar = () => { const [value, setV ...

javascripthtmlreactjstypescriptfrontend