Develop Reference

jquery lightbox select source/link based on content type

I'm trying to create a lightbox that uses the rel attribute and the href/src (depending on the type of content). I need an if/else statement to assign an href to a variable (contentURL) if the content's a video but assign the src instead if the content's an image.
html for video content:
html for image content:
<img src="images/photo.jpg">
Here's what I have so far:
$("a[rel='lightbox'").click(function(e){
e.preventDefault();
var shadow = $('#lightbox-shadow'),
lightbox = $('#lightbox');
shadow.fadeIn(300);
lightbox.delay(450).fadeIn(300);
var contentURL; //assign href or src to this variable
//IF/ELSE STATEMENT HERE
shadow.click(function(){
shadow.fadeOut(300);
lightbox.empty();
});
});
Also, if you could help me understand the ajax method for loading the content, that would be awesome! :)

Given the HTML above, one way to tell whether to grab the src or href attribute would be to test if the clicked link contains an image tag. I have a sample working with this code:
$("a[rel='lightbox'").click(function(e){
e.preventDefault();
var shadow = $('#lightbox-shadow'),
lightbox = $('#lightbox'),
$target = $(e.target).closest('a'),
$img = $target.find('img'),
contentURL;
shadow.fadeIn(300);
lightbox.delay(450).fadeIn(300);
contentURL = ($img.length > 0) ? $img.attr('src') : $target.attr('href');
console.log(contentURL);
});
You can see that working here if you open the console:
http://jsfiddle.net/9XELr/
However, this sample will only work if your youtube links never contain images. If they might, you will need to set up some other conditional logic, maybe a class or data attribute on the link itself that is different depending on the type of content.

Use javascript to click all images based on src value only

I want to click all the links on a page that have a certain image src.
I know I can do the following if I know the id:
alert(document.getElementById('image').src);
But I know know the src and nothing else is there. No id, alt or title, nothing only src.
Anyone have any idea on how to do this? Thanks!

Easy.. though please read jquery's documentation when you get the chance:
$("img[src='src_goes_here']").trigger("click");
Assuming you want to click the link that has a child image with a particular source..
$("a img[src='src_goes_here']").parent().trigger("click");

I'm not sure what you mean with "clicking links with a certain image-src", as clicking would be a user-interaction and links don't tend to have a src - attribute like the <img>-tag
Anyhow, using jQuery as example, there is something called "Attribute-Selectors", in your case the Attribute Equals Selector (jQuery-API) should do the trick:
var yourSource = "/path/to/image.jpg";
var myImages = $('img[src="'+ yourSource +'"]');
So, for example, if your images are inside a link, all you'd need to do is:
myImages.parent().trigger('click');
but I really don't know what good that should do

$('img[src="' + yourKnownSrc + '"]').click();
In case you want to click links "having" an image:
$('a').has('img[src="' + yourKnownSrc + '"]').click();

Image swapping with Jquery

I am very new to Jquery so please excuse this noobie question. I am trying to swap a background image of an <h1> element when a user clicks on the corresponding hyperlink. The <a> tags are generated dynamically and there can be 'n' quantity of them at any time depending on how many images are set in a SQL table.
My HTML is:
<div id="feature-image">
<h1><span>A random heading</span></h1>
</div>
<div id="feature-links">
<a class="a1" href="#">1</a>
<a class="a2" href="#">2</a>
<a class="a3" href="#">3</a>
</div>
The <span> tags are set to display:none
I've written this Jquery statement to run when a user clicks on a hyperlink in the #feature-links div. I was attempting to set the var image to the name of the <a> tags class (a1, a2, a3) etc. and then change the CSS background image property of the <h1> using the image var as part of the .jpg. url.
<script>
$(function(){
$('#feature-links a').click(function(){
var image = $(this).attr("class","");
$('#feature-image h1').css('background-image','url=(\'main_' + image + '.jpg\')');
});
});
</script>
all my images are named "main_a1.jpg", "main_a2.jpg" and so on...
I can't see what I am doing wrong or whether what I am attempting to do (grab class names etc. in vars) is actually good practice or not... some help would be really appreciated.
Thanks in advance!
EDIT:
Jquery code after edits:
$(function(){
$('#feature-links a').click(function(){
var image = $(this).attr('class');
$('#feature-image h1').css('background-image','url(images/main_' + image + '.jpg)');
});
});

Change line to:
var image = $(this).attr("class");
I believe specifying 2 parameters to the .attr() function is used for changing the attribute value. Therefore in your case, it would change the class to "".
Specifying one parameter will return the value of the class

A better way, instead of using the class would be to set the href.
For example:
$('#feature-links a').click(function(e){
$('#feature-image h1').css({
'background-image': 'url(' + $(this).attr('href') + ')'
});
e.preventDefault(); // Stops the standard link behaviour
});
Then your links would simply link directly to the background image:
1
Hope that helps :)

How to update HTML element with jQuery and Galleria?

I am using Galleria for a slideshow. I want to place a small, 'Larger' link beside the stage.
I have this code for the 'Larger' button:
this.fullres = this.create('div', 'fullres');
this.get('fullres').innerHTML = 'Larger';
this.appendChild('fullres', this.fullres);
I have this code that assigns every <img>'s rel= tag to the full sized image URL from the page's custom field:
<img ... rel="<?=$attachments[$i]['fullres']?>" />
With JQuery, I am hoping to pull the active image's rel= tag value and append the .fullres href tag. This is the code I have so far, but it doesn't work:
var title = $(.images).attr('rel'); // pulls the fullres url from the rel tag
$('.galleria-fullres').attr('href', ); //append the galleria fullres href with the rel info

Galleria doesn't really work like that. But what you can do, is to create a button to enter fullscreen and have a larger image in fullscreen.
Something like this:
$('#galleria').galleria({
// other galleria options here
dataConfig: function( img ) {
// get the fullscreen image
return {
big: $( img ).attr('rel')
};
}
});
var galleria = Galleria.get(0);
$('#fullscreen-button').click(function() {
galleria.enterFullscreen();
});

I have to say I can't see how this would work as it is...
Do you know you have a typo at: $(.images)? Should be $('.images').
And have you left out the second parameter at $('.galleria-fullres').attr('href', ); on purpose? Shouldn't this be $('.galleria-fullres').attr('href', title); ?
How can the jquery work by referencing the elements by classes? You are getting an array of elements, not just one. I guess this is only an excerpt of your code? Am I missing something?
Could you perhaps post the html of a sample of these elements as seen in the browser? It should be a pretty easy thing, but I really can't see the whole picture with those lines only.

Writing to a non-unique div with Javascript

I'm building a multi-feed RSS reader for school.
aList is the div that encompasses each individual feed (the amount of feeds will fluctuate).
theTitle is the div that will be filled with the attribute of the current feed. Additionally, if clicked, it will load a list of attributes from the current feed into theContent.
I'm wondering how I can dynamically load the attributes into theContent when theTitle is clicked, since theContent and theTitle are going to be non-unique divs (I can't give them IDs).
Thanks for your help in advance,
-Andrew

document.getElementsByClassName('aList').getElementsByTagName('div')

You should look into jQuery selectors for that and other DOM Manipulation. Something like
$("div.theContent").attr("name", "value");

by using jquery, you may use code like the following:
$(".theTitle").bind("click", function(){
$el = $(this);
$el.parent().$(".theContent").load('ajax/content.php?news=' . $el.text());
});
this will make all your links clickable, an on click, update their corresponding content divs with the value of ajax/content.php?news=theTitle-value

Use a nice Javascript library such as Prototype or jQuery. Seems petty now, but these frameworks save you tons of time in the long run.
In both frameworks, you can select that div with:
$('div.theTitle')
With jQuery, you can do:
$('div.theTitle').click( function() {
var title = $(this).text();
var contentDiv = $(this).siblings('div.theContent');
// Do something with contentDiv and the title
} );
This will make every theTitle div have an onClick event that does something with its associated theContent div.

<div class="aList">
<div class="theTitle" onclick="fillContentBox(this)"></div>
<div class="theContent"></div>
</div>
And in your script ...
function fillContentBox(div) {
var theContentDiv = div.parentNode.getElementsByTagName("div")[1];
// statements that do things with theContentDiv
}

You have to be able to determine which element you want to update if you don't want to update more than one. If the elements are grouped inside something else that does have an "id" value, you can take advantage of that.