How to create a link with CLASS in javascript? - javascript

This is my first question here in StackOverflow, but I have used the site many times, and you always helped me with your answers. Now its time to share my doubt, because I could not find a similar one here.
I have a flash banner rotator in my website, that uses a XML to configure the images and links that will rotate. I don't have acess to the source, because it is a commercial version.
I can not use jQuery to rotate the images, because I have a drop down menu and it always fall behind the banner. I tried z-index but it does not work on IE.
One of the images is to show a video, so, when someone click on it, I want a lightbox to open and play the video (I will use Sublimevideo.com for this)
The XML now is like this:
<slideshow>
<photo image="path/image.jpg" url="link" target="_blank"></photo>
</slideshow>
I need to add a CLASS to this link, because I want it to be opened in a lightbox!!!
So I was wondering to do something like this:
window.location.href='link class="lightbox"';
But this is not a option, it did not worked!
So how can I add a CLASS in the link at the xml file?
I was wondering using javascript, but if you have any other option, it will be GREAT!
Thanks a lot in advance and sorry for my English, I'm from Brazil =P

You could do it with an horrendous jQuery hack:
$('*[href*="path/image.jpg"]')​.addClass('lightbox');​​​​​​​​​​
Of course, if you know what the HTML will look like you could use a far more specific / less ugly selector.
A much better solution would be to add the class on the server, which sounds like it should be possible.

Related

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 "box-webpage" upon click

I'm trying to accomplish something that might be relatively simple, but I don't know what I would call it (if there is a specific name for it), hence my searches have proved useless.
What I'm trying to accomplish is simple: I have a page built off off the Masonry jquery plugin (similar to http://designshack.net/tutorialexamples/masonry/demos/masonry.html). All I want to do is that when I click on a specific picture, it creates a "box" that fills up part of the screen and can contain another webpage (to describe the picture) while fading out most of the background. Then when I click outside of the box, it returns to all of my pictures.
I've seen this before, as I'm sure everybody else has, but for the life of me I cannot remember an example to look at or how best to do this. I don't have too much experience with javascript or jquery (which is why I'm asking this), but any help to point me in the right direction, whether it is using javascript or html/css, would be great.
If anybody does get the gist of what I'm describing and can explain it better, then you're more than welcome to edit..
What you need are modal windows.
I know the twitter bootstrap has built a pretty good framework for this:
http://getbootstrap.com/javascript/#modals
If you aren't using the bootstrap directly you might be able to pick out what you need.

How to add a resizable, dragable overlay to a webpage?

I'd like to make a userscript that can put an resizable, dragable overlay over a browser game. Only I don't have a clue how to start.
It'd basically have to be a div with some styling and javascript applied to it, containing an <iframe>. I'd also like to pass a string displayed in the game screen (HTML5, not Flash) to the iFrame, but this can happen through the use of $_POST and $_GET parameters, as it probably wouldn't be possible otherwise due to some kind of "cross domain policy".
Can someone get me on my way, with an example of a basic Chrome userscript, that would allow me to inject some HTML code for the overlay div into the game?
Why not use something like an existing Javascript framework (gotta love em')? I know this has been done again and again and again before. I feel like doing this sort of Javascript yourself may not really be worth your time. Usually when I see things like this, I offer the help of a framework. Couldn't hurt to check one of them one, you may end up saving yourself a lot of time coding something that's been done before and tested through time.

Simple lightbox feedback form? Included screenshot

There are so many lightboxes to choose from, I'm looking for a very lightweight one to use in an embedded javascript widget that would be a single domain name. I saw the perfect one on chainreactioncycles.com, it popped up out of nowhere so I took a screenshot:
I tried looking for info on it on the page source, but couldn't find anything that would let me trace where it came from... Would anybody know of one like this? Or exactly that one?
If not exactly like above, anything similar would be great too, keeping the following in mind:
Very small javascript download (animation not needed)
Self contained, not dependent on any libraries other than jquery (since I'm already using that anyway).
Works in major browsers
Close button (like GetSatisfaction or UserVoice)
Dims background
Avoids javascript namespace conflicts (or can easily be made to avoid them)
CSS styling of lightbox does not interfere with site styling
Have you used an existing lightbox scripts for this same purpose with similar requirements? Did you roll your own? Insights welcome!
What you are looking for is called a modal box.
Here is a list of them
... and here is a striking replica of what you are looking for
Check out Zoombox.. It sounds like what you're looking for... Simple to use... Allows custom content.. jQuery Module... From past experience it covers what you have outlined as requirements etc
http://www.grafikart.fr/zoombox will tell you all you need to know.

want to make better content display

We are developing a social networking project, in this project we are adding content , e.g. images , video,audio,link(html).
Currently we are using shadowbox.js to show it.But for better and effectiveness we want to use some other better plugin, or want to make own window for showing images and link.
Please help , what is the best solution for this project.
I want to know this is the white board quesion means programmer.stackexchange question or stackoverflow quesion?
Thanks
There are 31 here:
http://www.dreamcss.com/2009/03/31-mind-blowing-collection-of-jquery.html
You should find one or more that suits your needs.
I would suggest using colorbox.js it can be found here :
http://colorpowered.com/
It is easily styled, comes with a pleathera of options including an image slideshow, can handle iFrames, Ajax content, Images, etc, and comes with a few options for styling to begin with.
Made my own div and use that for displaying content :)

Categories