Solved

CSS Adding rel="lightbox" to all Image hyperlinks?

Posted on 2013-01-11
7
383 Views
Last Modified: 2013-01-14
Hi All

I'm slowly getting better with CSS, so bear with me :(

When I'm adding image hyperlinks to my website articles, I simply drop to the code and add rel="lightbox" into the URL so that it uses the lightbox image transition when the images are clicked {example}

before
<a href="/KB/Media/0000742/00001.jpg"><img src="/KB/Media/0000742/00001s.jpg" width="550" height="421" alt="_vti_inf.html" /></a>
after
<a href="/KB/Media/0000742/00001.jpg" rel="lightbox"><img src="/KB/Media/0000742/00001s.jpg" width="550" height="421" alt="_vti_inf.html" /></a>


Can I not just add something to my CSS so that if the link is an image, add the rel="ligthbox" automatically? If so, what and where?

Pete
0
Comment
Question by:Pete Long
  • 4
  • 3
7 Comments
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 38767288
CSS doesn't work like that. It's a static language.

You could use some jquery to add it though.

$(''a img[src$=".jpg"]'').attr('rel', 'lightbox')

Open in new window

0
 
LVL 57

Author Comment

by:Pete Long
ID: 38767310
Yikes - I'm a network engineer! , where do I put that? and I'm assuming I would also need..

$(''a img[src$=".png"]'').attr('rel', 'lightbox')

Would that go in my CSS, or am I Waaay out of my depth here?

Pete
0
 
LVL 30

Expert Comment

by:LZ1
ID: 38767334
It's not too bad Pete. First do you know if your loading jQuery in your page?
If not add this  just before the closing </body> tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(''a img[src$=".jpg"]'').attr('rel', 'lightbox')
</script>

Open in new window


If you already have jquery on your page, then just add the 2nd part.

Do you have a live URL you could share?
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 57

Author Comment

by:Pete Long
ID: 38767338
I Don't think I am http://www.petenetlive.com/KB/Article/0000742.htm

Would it not be more efficient for me to load something into my JS folder on the root of the site and reference that - or is that a stupid question?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 38767388
Not a stupid question. I see your loading prototype.js. In that case, you can't use what I've given you.

Try this instead.

$$('a[href$=.jpg], a[href$=.png].each(function(
link.writeAttribute('rel','lightbox');
}

Open in new window


I'm not very good with Prototype, but this will hopefully get you started.
0
 
LVL 57

Author Comment

by:Pete Long
ID: 38767466
Tried - the first graphic has a manual rel in the link, the rest of the graphics I've removed it, they have stopped working

http://www.petenetlive.com/KB/Article/0000742.htm
0
 
LVL 57

Author Closing Comment

by:Pete Long
ID: 38773767
Unfortunately I can't really implement this, but as no other experts were forthcoming, Ill close and accept this as a workable solution.

Thanks for your efforts


Pete
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Css issue on scroll 1 20
Do we need servers??? 5 136
Stupid git question 2 22
Problem to page 4 26
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to dynamically set the form action using jQuery.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now