Avatar of ramziabk
ramziabk
 asked on

JQuery Popup

I need to add to my website page an image. Once the image is clicked, a popup window will open.

I downloaded the source code from Istockphp.com.
I need to know what should I do for the pop to work on my website.

I'm attaching the source code from Istockphp.com. I'd appreciate if you guide me on making it work on my website.

Many thanks
Ramzi
Web Languages and StandardsWeb-Based CMS

Avatar of undefined
Last Comment
Chris Stanyon

8/22/2022 - Mon
Chris Stanyon

No code attached!

Have you read the instructions from IStockPHP. They seem pretty self-explanatory!

http://istockphp.com/jquery/creating-popup-div-with-jquery/

If you have problems getting it to work, then ask a specific question, but at least follow the instructions first
ramziabk

ASKER
Thanks Chris.
The fact that it is the first time I work with PHP and Jquery, Im have some tough time.

Accordning to the link you mentioned above, I've uploaded the style.css and Jquery script to the server.
I created a page and pasted the html code.

I can see only the text saying

Click here trigger

If I click nothing happens.

Under it Press Esc to close and another Click here Trigger.

As it is not seeing the trigger!!!
Chris Stanyon

OK. We'll get you there, but we're going to need a link to your page so we can have a look at what you've done.
Your help has saved me hundreds of hours of internet surfing.
fblack61
ramziabk

ASKER
We can have a webEx session and will show you what I did.

Ramzi
Chris Stanyon

I'd prefer a link to your page
ramziabk

ASKER
This is the link to our website
http://blom.sa/livestreaming

Note how I arranged the cameras as links just to go Live with the project.
Ideally, I will add six buttons on the same page with lightbox or popup for each camera.

Hope this helps

Ramzi
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Chris Stanyon

Hey Ramzi,

Thanks for that. However, I'm struggling to get a handle on this. Your page doesn't seem to contain any of the code from the istockphp.com page, so I can't see where you're going wrong.

You say you have the Click Here trigger text, but I can't see it anywhere. Maybe you've given me a link to the wrong page??
ramziabk

ASKER
Please find the link below.

http://blom.sa/TEST_popup

Note that now the popup is not working. But even if it is working, I will need to know how to create multiple popups for the six cameras on the same page.

Best
Ramzi
Chris Stanyon

2 of the files that your page needs are giving 404 errors. You have these 3 lines:

<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Open in new window


The style.css and script.js are not being found, so you need to fix that. Also the lines should be in the HEAD of you document, not the BODY. You are already loading the jquery library from the HEAD so you don't need to load it a second time - it will break things.

Have you considered hiring a professional web developer to help you out. At this stage, we seem to be really struggling to get even the very basics right, so I'm guessing you have no experience at this kind of thing. Sometimes it's just more cost effective to pay a professional for an hour or two..
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ramziabk

ASKER
Would you do it for us. Will pay you ? Let me know.
ASKER CERTIFIED SOLUTION
Chris Stanyon

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.