Excluding certain images from a JavaScript Photobox animation within a div - a step-by-step guide

Currently, I am using photobox to showcase all the images in a div as part of a beautiful gallery display. However, there is one image that I do not want to be included in this gallery - a PDF icon which, when clicked, should download a PDF file. The issue is that this icon appears within the gallery when clicked, and I am looking for a way to exclude it or perhaps section it off from the rest of the div.

Below is the code snippet I am working with:


<div id="gallery">
           <td width="226" align="right"><table width="206" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="199" align="center"><a href="images/GrndFloor_dimension.jpg" target="_blank"><img src="images/GrndFloor_dimension_th.jpg" alt="Ground Floor" width="182" height="182" border="0"/></a></td>
      </tr>
      <tr>
        <td height="64" align="center" background="images/thumbs-text-holder.jpg" class="planscopy" style="background-repeat:no-repeat"><table width="151" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="104"><span class="planscopy" style="background-repeat:no-repeat">Ground Floor - Dimensions</span></td>
           <td width="47" align="right"><a href="docs/Ground Floor Plan - Dimensions.pdf" target="_blank"><img src="images/pdf.png" width="48" height="51"/></a></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
      </div>

      <script type="text/javascript">
     $('#gallery').photobox('a', { thumbs: true }, imageLoaded);
    function imageLoaded() {
        console.log('image has been loaded...');
    }

I am specifically seeking a solution where the pdf.png image does not show up in the gallery but instead functions solely as a link to the document. Is there a way to, for example, exclude a specific div ID within a larger div?

Any assistance on this matter would be highly appreciated.

javascripthtmlcss

Answer №1

If you want to exclude the A-Element ( PDF ) and assign it a class called "exclude", you can use the following JavaScript code:

<td width="47" align="right"><a class="exclude" href="docs/Ground Floor Plan - Dimensions.pdf" target="_blank"><img src="images/pdf.png" width="48" height="51"/></a></td>

<script type="text/javascript">
    $('#gallery').photobox('a:not(.exclude)', { thumbs: true }, imageLoaded);
        function imageLoaded() {
        console.log('image has been loaded...');
    }
</script>

Answer №2

$("#gallery").photobox("a:not(:has([src$='pdf.png']))', { thumbs: true }, imageLoaded);

This solution is effective (Check out the demo for this selector here: http://jsfiddle.net/pUkz2/)

It's worth mentioning that using the "pdf" class on the anchor tag and adjusting the selector can improve performance:

$("#gallery").photobox("a:not(.pdf)', { thumbs: true }, imageLoaded);

I conducted a performance comparison test: http://jsperf.com/pukz2

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

What could be causing the issue with multiple selection in jQuery?

I am interested in implementing multiple selection on my ASP page. I came across the pickList jQuery plugin and followed the instructions provided at the following link: Below is a snippet from my ASP page: <%@ Page Language="C#" AutoEventWireup="true ...

javascriptjqueryhtmlasp.net

Selecting the checkbox will activate the POST endpoint

I am working on a nodejs/express app and looking for a way to update my database using a POST route when a checkbox is clicked. The challenge I am facing is that I want to avoid using a submit button or jQuery. I am currently using a Bootstrap4 checkbox ...

javascriptnode.jsbootstrap-4

Using jQuery, adjust the width of child elements within a container by applying dynamic CSS styling

I am attempting to dynamically set the width of several child elements using jQuery. Here is what I am trying to achieve: Obtain the count of the desired containers (since there will be multiple instances of the .steps-container class in the DOM) Iterate ...

javascriptjquerycss

Having trouble accessing the ms crm page on my aspx page using "parent.window.xrm.page" in the Chrome browser

Encountering an exception where a frame with origin "https:domain1:port1" is being blocked from accessing a frame with origin "https:domain1:port2". The error occurs at the code snippet "window.parent.Xrm.Utility.openEntityForm("entityName", null, paramete ...

javascriptasp.netgoogle-chromedynamics-crm

What is the best way to prevent the navbar from covering content? The navbar-static-top option helps, but it doesn't allow for fixed-scroll

I am facing an issue with my navigation bar while using asp.net. When I apply the class navbar-fixed-top, the navigation bar becomes fixed and scrolls with the page, but it overlaps the content in the contentplaceholder However, when I switch to the clas ...

jqueryhtmlasp.netcss

How can I use jQuery to wrap multiple elements into separate divs simultaneously?

Is there a way to wrap elements individually with jQuery? I am able to wrap different divs, but they all end up wrapped in one parent div instead of separate ones. This is what I currently have: <section> <div class='parent'> ...

javascriptjquery

What are some methods to manipulate the appearance of text with jquery?

I am having trouble with jQuery and it seems like it's not working properly. Can anyone help me locate the error? My aim is to create a "Read less" button that will show more content when clicked. However, when I click on "Read More", nothing happens. ...

javascripthtmljquerycssbootstrap-4

Creating Dynamic HTML/DOM in Angular 14: A Guide for Adding New Items to a List

I am currently iterating through a list of items and displaying them within a div element. These items are rendered when the page initially loads. <button (click)="addCut()" mat-raised-button color="primary">Add New Cut</button ...

javascripthtmlangulardom

Styling elements with CSS to achieve proper positioning

I am in search of a way to align rows utilizing the style property. The following HTML code is being transformed using XSL: <span style="white-space: pre; font-size: 8pt; font-family: Lucida console, Courier ">&lt;40 : item1</span>&l ...

htmlcss

The property 'titulo' of 'actividad' cannot be destructured because it is currently undefined

I'm currently utilizing the useParams hook to fetch a custom component. It successfully renders the id, but nothing more. Here's a snippet of my code: import React, { useState } from "react"; import { Link } from "react-router-dom ...

javascriptreactjsreact-routerreact-router-dom

position overlapping div elements

There are three float:left divs in my setup <div class="center"> <div class="fade1"></div> <div class="fade2"></div> <div class="fade3"></div> </div> The objective is to click on these divs and reveal co ...

jquerycss

Transforming a traditional HTML/CSS/JS website into a cutting-edge React application using Tailwind CSS styling

I have a unique website template complete with HTML, CSS, and all necessary assets. Now, I am looking to develop a React JS application using this template. Firstly, I am wondering: Since I typically use Tailwind CSS for my other projects, would it be mo ...

htmlcssreactjstailwind-css

What is the best way to compare two arrays of ids in MongoDB to find matching elements?

I have 2 arrays with different ids : bikesWithNoOrders [id , id1 , id2] filteredResult [id3 , id5] Is there a way to query and find all of them at once? This is what I currently have: queryBuilder.find({ _id: { $in: bikesWithNoOrders } }); queryBuilde ...

javascriptnode.jsmongodbexpressmongoose

Guide on creating a sitemap using Express.js

I've been working with the sitemap.js package from https://www.npmjs.org/package/sitemap While I can add URLs to the sitemap manually, my challenge lies in adding URLs based on data retrieved from MongoDB. Since fetching data from MongoDB is asynchro ...

javascriptmongodbexpresssitemap

CSS - Adding a Distinctive "Line" to a Navigation Bar

I am attempting to design a unique navbar layout with two "lines". The first line should consist of several links, while the second line would include an HTML select field with a submit button. The following code will generate the desired navbar visual ou ...

css

Incorporate checkboxes within a dropdown menu using JavaScript

Is there a way to achieve something similar in pure JavaScript, without relying on jQuery? ...

javascripthtml

The layout of the keyboard in Cordova has been altered

Just starting out with my first Cordova app and I'm working on a simple login form. The issue I'm facing is that whenever I click on an input element, the keyboard pops up and completely messes up my layout, which should be straightforward. Has ...

javascripthtmlcsscordova

Disabling function name renaming in Webpack for TypeScript and Javascript files

Is there a way to prevent Webpack from renaming function names? I have a class named MenuBlocksMenuPage in my code: import { MenuBlocksMenuPage } from "../pages/menu/blocks/menupage"; However, the compiled file turns this line into an unreadable string. ...

javascriptfunctiontypescriptwebpack

Updating documents in Mongoose based on specific criteria

Is there a way to unset a mongo field that is an ObjectId referring to another schema if the ID matches the current user's ID? If the field is already unset, can the current user's ID be set instead? If the field is set but the ObjectID does not ...

javascriptnode.jsmongodbmongoose

What is the easiest way to transform this json data into plain text format?

Snippet: if (message.content.startsWith(config.prefix + 'shop')) { const shop = LabyMod.getShop('all').then(shop => shop.map((sh) => sh.name)); const awaitShop = await shop console.log(JSON.stringify(awaitShop)) ...

javascriptnode.jsdiscord.js