Disabling OnClick action for lightbox blog featured image - javascript

I'd like to disable the lightbox pop up for the featured images on both my blog and tutorials landing pages.
Best case scenario, the photo would link to the article but if not, I'm happy with it just not being clickable at all. I'm not good at javascript and have researched enough to know it's on the onclick action I need to disable but can't successfully figure out how to apply it to my required pages.
Could anyone please help me with the correct code(s)? Any help is greatly appreciated!
The pages I'm trying to disable this function on are
https://katiakolour.com/tutorials/
https://katiakolour.com/blog/

But your links are pointing to images.
Obviously, changing href attribute of your links from images to articles would make more sense than "Disabling OnClick action".

Related

How to add a popover link on tumblr

I'm a new user to Tumblr and I see other people with links to their blogs commented on their posts. I know how to use HTML to add and edit the link, but how do I include the popover feature that appears when you hover over a blog link?
Is there a built in way to do it via the post editor, do I need to edit my template, or is there something else I'm missing?
I have tried googling it and inspecting the page, but have had no luck. Could someone please point me in the right direction or show me the code for how to do this?
Thank you for your time.
It turns out all I need to do is just add a link that's an actual blog.

CSS-stylable popup (modal) that doesnt load until it is opened

so I'd like to build something like That.
Now I want to put a LOT of these buttons on a page and every popup must contain a different <iframe> (embedding videos). Also I'd liek them to be CSS-stylable.
So what I cant seem to achieve is two things:
- I cant find any script (I'm extremely new to web thingys) that will open DIFFERENT popups for different buttons
- I cant find something that lets the contents of the popups remain unloaded until they are actually displayed.
Thanks for any help!
PS: I only know how to use jS, HTML and CSS so I cant use fancy stuff... First project...
-edit-
Okay, i didnt know server-side things are related to this. I can use PHP (actually I'd populate the popups per PHP) so is there a way using the specified languages plus PHP? and if not, how can I achieve the other goal I specified? I have no idea of JS, I just know how to use scripts...
hope this link will help:
http://getbootstrap.com/javascript/#modals-related-target
plz recheck your data-target="#exampleModal" in button is the id of the modal and put iframe instead of this form in this link.

Adding Hyperlinks to Image & Text

I'm a beginner coder and I've been tasked to do some coding in JavaScript using the jQuery library.
What I'm supposed to do are two things.
When I click on a pre-existing image it redirects me to a URL.
When I click a pre-existing text in the navigation bar, it redirects me to a URL.
I can do this fine in HTML but have some challenges with jQuery. Can any kind soul show me where I should start?
This info should help you out...
http://www.w3schools.com/tags/tag_a.asp
http://www.w3schools.com/jquery/sel_attribute_end_value.asp

simple jquery lightbox for displaying images

I cant believe I am asking this - but I spend the last TWO HOURS looking for a simple jquery lightbox to give to my students to learn how to implement...
What I need is something that is very simple:
I have a bunch of images and when I click on them I need a lightbox to open with a (different) image that I can specify...I just cant find anything that does simply that. Of course the lightbox will need to behave like a standard lightbox (X- close button, scale to size of image, have a line of caption or so)
something like:
$('.this-image').click(function(){
awesomelightbox.open('new url');
})
Most of the lightboxes I checked open either the same image that was clicked, or has a gazillion options that my students wont understand.
I tried:
- LightBox
- ColorBox
- FancyBox
- VisualLightbox
- Featherlight
Nothing suits my requirement :(
Does anyone know any simple lightbox that does what I mentioned? I would greatly appreciated any pointers.
Actually, using Fancybox you can do it. I went to their "How To" and they have an example. Look at the last bit of code on the page. If you are only trying to display 2 different images you can use their method. Notice how they have a small.jpg and a big.jpg, so it essence they are using 2 different images. This way they can use one image for thumbnail and a larger one for the actual fancy box. Is this what you are looking for?
EDIT: Or if you would like to use my plugin you are welcome to source it from my site. Here is an example, check sourcecode for usage.
http://tylerteaching.com/coolbox/
I'd recommend using Maginific (http://dimsemenov.com/plugins/magnific-popup/), or Pretty Photo (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/)

Creating a Login System like Battle.net

I'm trying to create a login system like http://us.battle.net/en/. The page is fully functional, then when you click on the "Log In" link, the page becomes dark and you can no longer interact with any of the images or links from the original page. A square box comes up, which you can interact with to login to the site, put you can still see everything from the original page.
I've been searching and searching and I can't find what I'm looking for. I just need some ideas to get me pointed in the right direction and I can go from there.
Thanks everyone!
Maybe something like jQuery UI Dialog could help you. Checkout the modal example.
Have a look into Colorbox - it's a jQuery plugin, very easy to use, and does exactly what you want.
The effect of graying out the page and showing a popup dialogue box is called a "modal" dialogue box.
I believe the functionality you are referring to is called a lightbox.
There are dozens of jQuery lightbox plugins around, a quick Google search suffices; FancyBox, for example, is a pretty nice one.

Categories