2

This code is for a filterable portfolio. Originally I had PHP for the next and previous links, but when the portfolio is filtered it doesn't find the next filtered object. I found that the filter places the list items next to each other in the DOM so I used next() to get the result. However, the link isnt loading properly. Its a link on the same page that loads thickbox. I have successfully got it to open in a new window and append to the window url, but no dice trying to get it to work. Here is the address of said portfolio.

http://blurosemedia.com/portfolio

$(document).ready(function(){
    $(".portfolio-next").click(function(e) {
    var $this = $(this);
    if($this.data('clicked', true)) {
    var namer = $(this).attr('value');
    var url = $(this).parents('body').children('#wrap').children('#inner').children('#content-sidebar-wrap').children('#content').children('ul#portfolio-list').children().next('.portfolio-item-' + namer).nextAll('.portfolio-item:not(:.isotope-hidden)').attr('id');
        window.location.load(url);
        e.preventDefault();
   }
        });
});

I had to climb all the way up the dow tree because the thickbox code automatically shows on the bottom of the page. One possible solution I thought was in order to get thickbox to load you must have class="thickbox". If I could somehow say load(url).withClass('thickbox') it might work, but I'm sure how the syntax should be.

user1419680
  • 21
  • 3

2 Answers2

0

you have many things to sort out, but here's some information to help you going to the right path:

1)

window.location.load does not exits, what you are looking for is window.location.href:

See the documentation from MDN

See the documentation from MSDN

e.g., window.location.href = url;

2)

Additionally,

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

You are setting the li's with an ID that starts with #.

See this link for additional information!

Workaround for this:

<li id="#TB_inline?height=450&width=900&inlineId=id-3" class="portfolio-item design portfolio-item-3 isotope-item">...</li>

Can be:

<li class="portfolio-item design portfolio-item-3 isotope-item">
 <span style="display:none;">#TB_inline?height=450&width=900&inlineId=id-3</span>
</li>

3)

You are traveling the DOM up and down for no reason. Since you have an ID present at the wrapper for your items (#portfolio-list), you can target it and start from there!

Also,

('.portfolio-item:not(:.isotope-hidden)')

Should be:

('.portfolio-item:not(.isotope-hidden)')

Using :not(:something), is used to target an element with a certain state, like :checked

See this Link for further information!

4)

Since the variable namer gets the current id of the opened item, and you want to pass to the next one, You code becomes:

$(document).ready(function(){
  $(".portfolio-next").click(function(e) {
    e.preventDefault();

    var $this = $(this);

    var namer = parseInt($this.attr('value'))+1;
    var url   = $this.attr("href");
        url   = url.substring(0, url.indexOf('=id'));
     
   window.location.href(url+"=id"+namer);
  });
});

See this Fiddle Example!

Take note that the tag a does not have any attribute value, so it is invalid markup.

See this link for further information.

Community
  • 1
  • 1
Zuul
  • 16,217
  • 6
  • 61
  • 88
0

Thank you for you detailed response. This is my first time really diving into jQuery. This is What I came up with:

<?php echo '<a href="#TB_inline?height=450&amp;width=900&amp;inlineId=id-" class="thickbox     
portfolio-previous" value="'; echo $portnum; echo '">Previous</a>';echo '<a 
href="#TB_inline?height=450&amp;width=900&amp;inlineId=id-" class="thickbox portfolio-
next" value="'; echo $portnum; echo '">Next</a>';?>

    //Next Portfolio Button
$(".portfolio-next").hover(function(e) {
e.preventDefault();
var $this = $(this);
//Get the value of the link which is the same value as the current list item
var namer = parseInt($this.attr('value'));
//Find the current div in the dom and find the list item id next to it
var falcon = $('ul#portfolio-list').children('.portfolio-item-' +    
namer).nextAll('.portfolio-item:not(:.isotope-hidden)').attr('id');

//Find the href tag  id and add the value from falcon
var url   = $this.attr("href");
url   = url.substring(0, url.indexOf('=id'));
if(falcon === undefined) {
var falcon2 = $('ul#portfolio-list').children('.portfolio-item-' +   
namer).prevAll('.portfolio-item:not(:.isotope-hidden):first').attr('id');
$(this).attr('href', url+"=id-"+falcon2);
}else{
$(this).attr('href', url+"=id-"+falcon);
return;
}
});

//Previous Portfolio Button

$(".portfolio-previous").hover(function(e) {
e.preventDefault();
var $this = $(this);
//Get the value of the link which is the same value as the current list item
var namer = parseInt($this.attr('value'));
//Find the current div in the dom and find the list item id next to it
var falcon = $('ul#portfolio-list').children('.portfolio-item-' +     
namer).prevAll('.portfolio-item:not(:.isotope-hidden)').attr('id');

//Find the href tag  id and add the value from falcon
var url   = $this.attr("href");
  url   = url.substring(0, url.indexOf('=id'));
  if(falcon === undefined) {
  var falcon2 = $('ul#portfolio-list').children('.portfolio-item-' +   
namer).nextAll('.portfolio-item:not(:.isotope-hidden):last').attr('id');
  $(this).attr('href', url+"=id-"+falcon2);
}else{
$(this).attr('href', url+"=id-"+falcon);
return;
}
});

It work but any suggestions on how to optimize would be greatly appreciated.

user1419680
  • 21
  • 3