I am looking to remove the magnificent popup jQuery effect

Appreciate the assistance so far. This issue is a bit tricky for me, as it involves jquery which I'm not well-versed in.

My aim is to make my image clickable.

<div class="col-lg-6 col-sm-12 mt-3">
          <a class="portfolio-box" href="img/portfolio/fullsize/2.jpg">
            <img class="img-fluid" src="img/gofar_square.jpg" alt="">
            <div class="portfolio-box-caption">
              <div class="project-category text-white-50">
                Category
              </div>
              <div class="project-name">
                Gofar
              </div>
            </div>
          </a>
        </div>

However, whenever I click on the image, a popup gallery appears stating that it can't find the image.

Further investigation revealed that the jquery file (magnifico popup) is causing this issue.

My question is how can I remove this effect? My intention is just to have a clickable image that leads to another HTML page.

Thank you once again for your help.

jqueryhtmlcssbootstrap-4

Answer №1

To make your image clickable, consider the desired action when it is clicked.

If you use class="portfolio-box", it can create a unique effect.

An easy method is to insert a 

<a  href="YourImage.jpg">
            <img src="YourImage.jpg" alt=""></a>
.

Please provide more details on what should occur after clicking on the image.

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

Rotating images with React

I am encountering an issue with implementing an image carousel in React. Previously, it worked perfectly when I was not using React, but now that I am migrating the page, I am facing an error. ** The carousel is located on the home page: ** const Home = ( ...

javascripthtmlreactjsimagecarousel

Is there a way to transform a string into a legitimate HTML list by utilizing regular expressions?

I am currently developing an application using angularjs. The data I am receiving from the back-end is in the form of an array. I need to transform it into an HTML list (li), but I'm not sure how to accomplish this. Here is the array string I am wor ...

javascriptjqueryregexangularjs

Should I publish on a model that can be accessed as a list?

Hey there, everyone. I'm new to .net mvc and I have a listing page for students. The challenge I am facing is that I need to enter grades for all the students on the page at once, but the model is structured as a list which makes it difficult to save ...

html.netformspostmodel-view-controller

What is the best way to detect the presence of multiple dialogs using Jquery?

It's interesting to see that I can open multiple tabs from different buttons/links. :) My goal is to have a dialog box open only if there are no other dialog boxes already open. I could use an if statement to check for each id with a dialog, but my ...

jqueryif-statementdialog

I am eager to incorporate my own unique 'add to cart' button

Currently, I'm utilizing the Motta theme for my WooCommerce store. However, I find the add to cart button to be too large for my liking. I am hoping to simplify it to resemble a plus button. Any assistance in achieving this would be greatly appreciate ...

csswordpressbuttonwoocommercecart

Input field with JQuery datepicker showing only months and years

I have encountered a question that closely resembles the one discussed here: year/month only datepicker inline The scenario I'm facing involves utilizing the input version instead of the div. In the case of using the div, the ui-datepicker-calendar ...

javascriptjqueryjquery-uicalendardatepicker

utilizing ng-option to present choices in a dropdown menu

I have been implementing a scroll-down menu in my application using options. However, I now want to switch to using ng-option to populate the values from a JavaScript file. I also require assistance with writing AngularJS code for this task. Below is a s ...

javascripthtmlangularjsng-options

What methods can I use to identify my current page location and update it on my navigation bar accordingly?

My latest project involves a fixed sidebar navigation with 3 divs designed to resemble dots, each corresponding to a different section of my webpage. These sections are set to occupy the full height of the viewport. Now, I'm facing the challenge of de ...

javascripthtmlcssvue.js

Is there a way to use AJAX to include an external PHP file into a WordPress website

I'm having trouble calling a file in a WordPress plugin using ajax. Here is the script I'm using: <script type="text/javascript"> function setVal() { var val = jQuery('#custom_text_message').val() alert('Setting the ...

phpajaxwordpressjquery

Formatting a span class within a bullet point item

How can we apply styling to a span class within a list item using CSS? I have attempted the following code, but it does not seem to be working: wrap.error { color: #FF0000; display: block; } <ol> <li> <span class='error&ap ...

htmlcss

jquery selector for elements inside of 'this'

I'm attempting to style the paragraph element within a specific selected element using CSS. I attempted surrounding the 'p' in quotes within the selector, but it did not have any effect. $('#characterSelect div').on('click&ap ...

jquery

Incorporating HTML content in email messages using a PHP mailer script

I have been exploring a way to incorporate HTML code into the email body using an AJAX PHP Form Mailer I discovered on this website: However, whenever I try to add my own HTML coding into the email body, it just displays the tags instead of rendering them ...

phphtmlcssajaxemail

Exploring the power of JQuery Ajax and manipulating Object fields

I am trying to figure out how to properly set the value of this field in my code: MyObject = function(){ this.field = null; this.build = function(){ var my_url = "..."; var my_data = "..."; $.get(my ...

jqueryajaxobject

Creating a dynamic dropdown menu using PHP and HTML

Here is an example of html snippet for a dropdown menu: <form name="navList" onsubmit="return submitForm();"> <select name="subMenu"> <option value> </option> <option value> CR_ID </option> <option value> CR_HEADL ...

html

A dialog box resembling a tooltip

Are there any jQuery plugins available that mimic the functionality of the tooltip dialog in the Flow App? (See screenshot here: ). I am currently working on a web app that requires a lot of tooltip dialogs. If there isn't a plugin available, could s ...

javascriptjqueryplugins

How to implement a Django block for loading CSS files

I have multiple pages and I need to load unique CSS for each page. I am using this method for all static files. In the head of my index.html file, I have the following code: {% block css %} {% endblock %} However, in my contact.html file, I have the fol ...

cssdjangostatic

Multiplication cannot be performed on operands of type 'NoneType'

Hello everyone, I am attempting to calculate the unit price and quantity from this table using the following model: class Marketers(models.Model): category =models.ForeignKey(Category, on_delete=models.CASCADE, null=True) name =models.CharField(max ...

javascripthtmlcssdjangobootstrap-4

Enabling JavaScript functions to accept a variable number of arguments

I am looking to enhance the versatility of the function below by enabling it to accept multiple callbacks to other functions if they are specified in the arguments. $(function() { function icisDashBox(colorElem, thisWidth, thisHeight, completeCallBack ...

javascriptjqueryfunction

What are the reasons behind the lack of smooth functionality in the Bootstrap 4 slider?

My customized bootstrap4 slider is functional, but lacks smoothness when clicking on the "next" and "prev" buttons. The slider transitions suddenly instead of smoothly. Any suggestions on how to fix this? Here is the code for the slider: $('.carous ...

javascripthtmljquerycssbootstrap-4

Error in Rails app when incorporating Stripe API with Javascript involved

Incorporating Stripe into my rails app using the Koudoku gem has been challenging. When attempting to load the page for capturing user credit card information, I encounter an error in my JS console: Uncaught ReferenceError: $ is not defined (anonymous fun ...

javascriptjqueryruby-on-railscoffeescriptstripe-payments