Jump to content
Larry Ullman's Book Forums

Recommended Posts

I have set up a picture gallery in which one of the elements is a video in an iFrame. It worked and I was happy until someone said "Why do you have to hit the camera icon again to escape from the video?'

 

Obvious and exactly what I strive towards - really simple UI. I tried to code the simpler interface.

 

I have proved sections of my code by 'commenting out' individual lines. I believe it is the selector filtering which is failing me - AND IT'S DRIVING ME CRAZY!

 

Please can you tell me 'the error of my ways, thank you.

 

 

The HTML :

<div class="twocol_pad30">

<iframe id="sunnyvideo" class="sunny" type="text/html"
src="https://www.youtube.com/embed/_xxxxxxxxxxx?modestbranding=1"
frameborder="0" allowfullscreen></iframe>


<p><img src="images/106_490.jpg" alt="Large image" id="Sunny" /></p>

<p class="sunny">
<a href="images/42_490.jpg" title="Image 1" ><img src="images/42_100.jpg" alt="sunny" /></a>
<a href="images/82_490.jpg" title="Image 2"><img src="images/82_100.jpg" alt="sunny" /></a>

<a href="#sunnyvideo" title="cameraIcon" ><img src="camera_icon_100.jpg" alt="sunny" id="sunnyvidicon"/></a>

<a href="images/95_490.jpg" title="Image 1" ><img src="images/95_100.jpg" alt="sunny" /></a>
<a href="images/106_490.jpg" title="Image 6"><img src="images/106_100.jpg" alt="sunny" /></a>
</p>

</div>


The jQuery that works but requires the camera icon to toggle to get in/out of the iFrame :

// Sunny functions (2)

$(document).ready(function(){

$("h2").append('<em></em>')

     $(".sunny a").click(function(){

             var largePath = $(this).attr("href");
             var largeAlt = $(this).attr("title");

             $("#Sunny").attr({ src: largePath, alt: largeAlt });
             $("h2 em").html(" (" + largeAlt + ")"); return false;
     });
});


$(document).ready(function() {

     $('#sunnyvideo').addClass('hidden');
     var vidurl = $('#sunnyvideo').attr('src');

            // hide #Sunny first
            $('#sunnyvidicon').toggle(function() {
                      $('#Sunny').addClass('hidden'), $('#sunnyvideo').removeClass('hidden').attr('src', vidurl);
}, function() {
                      $('#Sunny').removeClass('hidden'), $('#sunnyvideo').addClass('hidden').attr('src', '');
            });
});
// end of Sunny functions(2)



The jQuery that I want to use to simplify the UI - but doesn't quite work:

//alt-combined Sunny function



$(document).ready(function(){
 
     //set environment
     $('#sunnyvideo').addClass('hidden');
     var vidurl = $('#sunnyvideo').attr('src');
 
//filter thumbnail events
          $(".sunny a:not(sunnyvidicon)").click(function(){
 
                              //set flag - remove when working!
                              var filterB = $(this).attr('title');
                              alert("flags have values : " + filterB + "\n" + vidurl);
 
          //hide iFrame/show large Gallery picci
          $('#sunnyvideo').addClass('hidden').attr('src', ''), $('#Sunny').removeClass('hidden');
 
          //get the attributes
          var largePath = $(this).attr("href");
          var largeAlt = $(this).attr("title");
 
          //set the attributes
          $("#Sunny").attr({ src: largePath, alt: largeAlt });
          $("h2 em").html(" (" + largeAlt + ")"); return false;
          });
 
// if cameraIcon is clicked
          $(".sunny a:sunnyvidicon").click(function(){
 
          //show iFrame/hide large Gallery picci
          $('#sunnyvideo').removeClass('hidden').attr('src', vidurl), $('#Sunny').addClass('hidden');
 
          //get the attributes
          var largePath = $(this).attr("href");
          var largeAlt = $(this).attr("title");
 
          //set the attributes
          $("#Sunny").attr({ src: largePath, alt: largeAlt });
          $("h2 em").html(" (" + largeAlt + ")"); return false;;
          });  
});

//end of alt Sunny function

Link to post
Share on other sites

On my working page, the viewer selects the large picture by clicking on the small images(thumbnails) lined up below. One of those thumbnails is a camera icon & link to the iFrame(an embedded video) which replaces the large picture on the web page.

To change between still pictures you just click on the next small image - but to leave the iFrame you need to click on the camera icon a second time i.e. it toggles the visibility of the iFrame and main picture element.

 

I am trying to change the UI so that just clicking on the next thumbnail toggles the visibility of the two main elements as well as changing to the chosen image.

 

By commenting out   $('#sunnyvideo').addClass('hidden'); and having just one of the event handlers working with no filtering applied, each handler has shown the functionality I want. I can't get the jQuery filtering to work and so identify if it was the camera icon which was clicked. It would then use the appropriate event handler and give the viewer the expected UI and image on the page.

 

It's my first venture into jQuery having read the chapter in Larry's book. This is my review & pursue!

Link to post
Share on other sites

Instead of trying to create two different selectors, I think you're better off having one selector with one click event handler, and then within the callback function, write all the logic necessary to determine whether the current "image" is a video or not.

 

A simply Boolean flag variable that you set each time a new full-size "image" is loaded should be sufficient for this task.

Does that all make sense?

Link to post
Share on other sites

I was trying to filter the event using the id == 'sunnyvidicon' as my Boolean for 'it's a video'.

 

I still can not get the syntax correct to set a variable var filterB= $(this).attr([id]) - when I set a flag it just told me the var was undefined.

 

so....

 

 

I used var filterB = $(this).attr('title'); and it works perfectly! The code is below - any improvements welcome.....

.....but I'd still love to know the syntax that gets a useable value out of $(this).attr([id]) - I'm sure I shall need it in the future.

 

Thank you

 

 

// alt Sunny functions
 
$(document).ready(function(){
 
//set environment
$('#sunnyvideo').addClass('hidden');
var vidurl = $('#sunnyvideo').attr('src');
$("h2").append('<em></em>');
$(".sunny a").click(function(){
 
//set flag - remove when working!
var filterB = $(this).attr('title');
// alert("flags have values : " + filterB + "\n" + vidurl);
// Is cameraIcon is clicked ?
if (filterB == 'camIcon') {
//set flag - remove when working!
var iconClicked = true;
// alert("Camera icon clicked : " + iconClicked);
//show iFrame hide Gallery large picci
$('#sunnyvideo').removeClass('hidden').attr('src', vidurl), $('#Sunny').addClass('hidden');
 
//get the attributes
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
// set the attributes
$("#Sunny").attr({ src: largePath, alt: largeAlt });
$("h2 em").html(" (" + largeAlt + ")"); return false;;
 
} else {
//hide iFrame show Gallery large picci
$('#sunnyvideo').addClass('hidden').attr('src', ''), $('#Sunny').removeClass('hidden');
 
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
 
$("#Sunny").attr({ src: largePath, alt: largeAlt });
$("h2 em").html(" (" + largeAlt + ")"); return false;
}
});
});
//end of alt Sunny function
Link to post
Share on other sites

Sorry 

 

I was in the midst of formatting it in the form - hit a shift key or something - and the post was sent before it was ready or I had re-read it.

 

The var filterB= $(this).attr([id]) was the Boolean I was trying to make work - I still can't  but would love to know the error in my syntax so that in the future I can extract the 'id' attribute when in jQuery.

 

The work-around was to use var filterB = $(this).attr('title'); instead.

Link to post
Share on other sites

Use the code bbcode at the forum. It looks like this: "<>" and is found between the image and quote icon. It'll improve the readability a lot.

 

Btw, unless you do something special with the class ".hidden", you can use $("something").show(); and .hide(); to get the same effect. If you always want the opposite, you can use .toggle();

 

An easier way to set the boolean flag:

// Get title
var filterB = $(this).attr('title');

// Is cameraIcon is clicked ?
var iconClicked = (filterB === 'camIcon') ? true : false;

Also, I had success getting the id value this way:

$(".sunny a").click(function(){
    console.log($(this).attr('id')); // You need to have id as a String
)};

Good luck.

Link to post
Share on other sites

Thanks team. Nice to get help in context.

 

Antonio, am I correct in thinking that 'toggle' latches i.e. it remembers which state it was at even if you are returning to the selected element having done multiple tasks in-between which affected the elements targeted by the 'toggle'?

Link to post
Share on other sites

I suppose a quick test could either confirm or disconfirm that.

While I don't know the specifics of jQuery in this case, more than likely, a simple ternary operation is performed for the sake of toggling, in which case, there's no "remembering", per se, as the element will simply be tested each time, and changed to the opposite state accordingly.

Link to post
Share on other sites

Yeah, at least functionally. I don't know how it works under the hood, but that's the effect. If it's hidden, it'll show up; if it's displayed, it'll be hidden.

 

No problem. I'm not a JS expert by any stretch of the imagination, and helping others forces me to learn new things.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...