0

I am trying to modify this tutorial to add in social network links. Here is the markup for the tile: 

<li>
                    <a href="http://cargocollective.com/jaimemartinez/" 
data-largesrc="http://wwwdev.cco.purdue.edu/ImageSlider/21centuryimages/logos/ALDI.png" data-title="ALDI" 
data-facebook="http://www.facebook.com" 
data-description="" >
                        <img src="images/aldi.png" alt="img01"/>
                    </a>
                </li>

And as you can see, I've included a data attribute of data-facebook. I went into the JS file and added the facebook lines to the following: 

var $itemEl = this.$item.children( 'a' ),
            eldata = {
                href : $itemEl.attr( 'href' ),
                largesrc : $itemEl.data( 'largesrc' ),
                title : $itemEl.data( 'title' ),
                description : $itemEl.data( 'description' ),
                facebook : $itemEl.data( 'facebook' )
            };

        this.$title.html( eldata.title );
        this.$description.html( eldata.description );
        this.$facebook.html( eldata.facebook );
        this.$href.attr( 'href', eldata.href );

When I save it and try it in Chrome, when I click the tile that shows the expanded information container, it takes me to the the href attribute instead. I'm not sure why adding those two lines messes it up. More specifically I've traced the line that actually makes the tile behave differently to this.$facebook.html( eldata.facebook );. Could you guys take a look at what I've done and see if I've made a glaring error? I've never done something like this so I'm new to it. Here is the site where you can check it out: http://wwwdev.cco.purdue.edu/matt/grid/index.html

Thanks!

Improve this question
1
  • this.$facebook is defined? Commented May 22, 2013 at 18:11

2 Answers 2

Reset to default
2

You've missed to adjust the create() method

create : function() {
    // create Preview structure:
    this.$title = $( '<h3></h3>' );
    this.$description = $( '<p></p>' );
    this.$href = $( '<a href="#">Visit website</a>' );
    this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href );
    this.$loading = $( '<div class="og-loading"></div>' );
    this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
    this.$closePreview = $( '<span class="og-close"></span>' );
    this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
    this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
    // append preview element to the item
    this.$item.append( this.getEl() );
    // set the transitions for the preview and the item
    if( support ) {
        this.setTransition();
    }
}

Add an element for $facebook and it should work.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I did add in this.$facebook at the end of the this.$details line, but I think this just creates the HTML for it. And it isn't responsible for breaking it. If I replace this.$facebook with "http://www.facebook.com/" it displays properly.
You're using this.$facebook.html(...) without defining this.$facebook which generates an error when clicking on a tile (as you can observe when viewing the console in the moment you click on a tile). Add this.$facebook = $("<div />") for example
Okay I did that and it fixed the site from following the link and showing the expander. And then to actually get to show the facebook link, how would I do that?
Do you think I could get a little more help from you? I'm having trouble adjusting the height of the expanded container. I don't like how tall it is. I can tell that it is generated with javascript based on the height of the window and a few other things. But I'm not terribly versed in JS and having difficulties. The new link is wwwdev.cco.purdue.edu/about/ncp.shtml. I'd really appreciate it!
Inspect the elements (firebug, developer tools, dragonfly, ...) and you will see where to change the styles to fit your needs - e.g. class superbox-show in style.css
0 
var $itemEl = this.$item.children( 'a' )

Returns a list of all the anchor tags for each li. Looks like it is returning more than one entry

Improve this answer

2 Comments

But there is only one anchor tag per li?
But there are multiple li's right.. So if this.$item corresponds to an li then this would fail

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.