CODEWITHSUNDEEP
jquerycss
webb
webb

Reputation: 215

fullscreen background images

I've already got a background image. But i'm builid a gallery which would have different categories. If i select a category the images would load up in little squares and then when i select any of them i want it to change a named id's content...enter image description here

e.g.

Any good tips would be appreciated immensely.

What i'm trying to do are two items.

  1. Change the color of the navigation box to a solid color.

  2. change the image source of an id "grouptabs" when clicked

    <div id="random"> <img id="grouptabs" src="/u/i/1920x1200.jpg" /> </div>

This is what i'm trying to get to... Thanks for all your suggestions

Upvotes: 1

Views: 546

Answers (2)

Joshua - Pendo
Joshua - Pendo

Reputation: 4371

Generally this is what you're looking for:

$('.thumbnail').click(function(e) {
  e.preventDefault(); // don't execute the link
  $(.thumbnail').css('background-color', 'none'); // reset all BG colors
  $(this).css('background-color', '#00FF00'); // fill BG of clicked elements parent (the p-element).

  var imghref = $(this).attr('href'); // get the image src from the href
  $('#grouptabs').attr('src', imghref);  // set the image src for #grouptabs
});

This works with a setup like:

1 2 3 4

So the image is being loaded in grouptab (the full size). In CSS you should specify that an a-element within class thumbnails is having a border and no bgcolor. The BG color is handled by the jquery click event.

Hopefully this helps.

// EDIT: try this:

$('.crafty').click(function(e) {
  e.preventDefault();
  $('.foliolist').css('background-color', 'transparant'); // set all foliolist items bg color to transparant
  $(this).parent().css('background-color', '#FFFFFF');
  $('#grouptabs').attr('src', $(this).attr('href'));
});

I'm not sure if you are using this setup:

<div class="foliolist"><a href="img/dir/file.jpg"></a></div>
<div class="foliolist"><a href="img/dir/file.jpg"></a></div>
<div class="foliolist"><a href="img/dir/file.jpg"></a></div>

or

<div class="foliolist">
  <a href="img/dir/file.jpg"></a>
  <a href="img/dir/file.jpg"></a>
  <a href="img/dir/file.jpg"></a>
</div>

Because there is a difference. In the first case my scripts works. In the second, you need the style (background-color) applied to $(this) instead of $(this).parent()

Upvotes: 0

netbrain
netbrain

Reputation: 9304

say you have stored the background information on the category. like for example through jQuery.data()

Then all you need to do is

$('.category').click(function(){
  var thisElem = $(this)
  $('#myBackround').css({background-image:"url('"+thisElem.data('backgroundImagePath')+"')"})
})

This example shows how you can change the background image of a dom element. However, if you want to change the content then you can use jQuery.html() instead of jQuery.css()

As a side note , you can also set the currently clicked category another opacity level in order to show that this is the selected element.

then you would do something like this instead:

$('.category').click(function(){
  var thisElem = $(this)
  //remove active effect on any previously selected categories
  thisElem.siblings().removeClass('activeCategory')
  //add active effect to currently selected category
  thisElem.addClass('activeCategory')

  $('#myBackround').css({
        background-image:"url('"+thisElem.data('backgroundImagePath')+"')"
  })

})

Where you could have the css property 

.activeCategory {
  opacity: 0.5;
  background-color: #f60;
}

Upvotes: 1

Related Questions