Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
I have been on the road for the past month. During my travels I have shown my new site to all sorts of people. Whenever I present my site to someone I like to watch how they navigate it. This allows me to do a couple of things: one is watch how people move around so that I can better direct them to what I want them to see. Second is to see where they get stuck so that I can make my site easier to use. This question is a result of an observation concerning the second category.
I have noticed that when people get to a gallery and start to view the grid they will scroll up and down a bit. When an image captures their attention they will then click on it which takes them into the highslide presentation. When they are done viewing the image they will then look for a way out. Most of the time people will click on the browser's back button. This takes them to the page they were on before they got to the gallery. Then I watch as they try to figure out what happened because they were expecting to see the gallery's grid. I know that this is the correct behavior because highslide displays images in a lightbox and not on a new html page. However, some web users don't seem to realize this.
This brings me to my question. I would like for there to be some obvious indication to people that they are still on the same page. I went ahead and made the highslide-close button larger but i think a little more would be helpful. I know that i could write a note on the page, or make the background of the highslide presentation partly transparent, but I would like something a little more integrated and obvious. One idea that comes to mind is to create a little text popup that shows up briefly when they enter the highslide presentation. I would model it after those popups that are shown when you enter full screen in some applications, but I would have it read something along the lines of "press esc. to exit". How hard would it be to implement something like this? Could it be implemented in a way that works site wide (maybe using phplugins)?
I am going to start researching this but it would be great to get some help or ideas. Also, if you have an idea for a different way to signal the user I would like to hear that as well.
Thanks,
Graceson
Last edited by gaufde (2015-08-16 05:03:49)
Graceson Aufderheide
gracesonaufderheide.com
Offline
Have a look at this:
http://www.bajb.net/2010/02/browser-bac … detection/
I haven't tested it, but you should be able to include this in your galleries via PHPlugins, then edit the highslide.cfg.js file to include the detection function. There is already be a close() function defined in the file, so you'll just need to do something like:
bajb_backdetect.OnBack = function(){
return hs.close();
}Offline
Ooo, I like the idea of changing the function of the browser's back button. I played around with this for a while last night. I tried inserting both pieces of code onto a Wordpress page thinking that I should get it to work before I start inserting it completely, but that didn't work. Then I tried inserting both pieces into my sites via phplugins to see if I could get it to work, but alas it still didn't work. Below are the two different pieces that I was playing with. The single quotes are all escaped out because I was putting this inside an echo statement so that the scripts would run on the page.
<script type="text/javascript">
var bajb_backdetect = {
Version: \'1.0.0\',
Description: \'Back Button Detection\',
Browser: {
IE: !!(window.attachEvent&&!window.opera),
Safari: navigator.userAgent.indexOf(\'Apple\')>-1,
Opera: !!window.opera
},
FrameLoaded: 0,
FrameTry: 0,
FrameTimeout: null,
OnBack: function() {
alert(\'Back Button Clicked\')
},
BAJBFrame: function() {
var BAJBOnBack = document.getElementById(\'BAJBOnBack\');
if (bajb_backdetect.FrameLoaded > 1) {
if (bajb_backdetect.FrameLoaded == 2) {
bajb_backdetect.OnBack();
history.back()
}
}
bajb_backdetect.FrameLoaded++;
if (bajb_backdetect.FrameLoaded == 1) {
if (bajb_backdetect.Browser.IE) {
bajb_backdetect.SetupFrames()
} else {
bajb_backdetect.FrameTimeout = setTimeout("bajb_backdetect.SetupFrames();", 700)
}
}
},
SetupFrames: function() {
clearTimeout(bajb_backdetect.FrameTimeout);
var BBiFrame = document.getElementById(\'BAJBOnBack\');
var checkVar = BBiFrame.src.substr( - 11, 11);
if (bajb_backdetect.FrameLoaded == 1 && checkVar != "HistoryLoad") {
BBiFrame.src = "blank.html?HistoryLoad"
} else {
if (bajb_backdetect.FrameTry < 2 && checkVar != "HistoryLoad") {
bajb_backdetect.FrameTry++;
bajb_backdetect.FrameTimeout = setTimeout("bajb_backdetect.SetupFrames();", 700)
}
}
},
SafariHash: \'false\',
Safari: function() {
if (bajb_backdetect.SafariHash == \'false\') {
if (window.location.hash == \'#b\') {
bajb_backdetect.SafariHash = \'true\'
} else {
window.location.hash = \'#b\'
}
setTimeout("bajb_backdetect.Safari();", 100)
} else if (bajb_backdetect.SafariHash == \'true\') {
if (window.location.hash == \'\') {
bajb_backdetect.SafariHash = \'back\';
bajb_backdetect.OnBack();
history.back()
} else {
setTimeout("bajb_backdetect.Safari();", 100)
}
}
},
Initialise: function() {
if (bajb_backdetect.Browser.Safari) {
setTimeout("bajb_backdetect.Safari();", 600)
} else {
document.write(\'<iframe src="blank.html" style="display:none;" id="BAJBOnBack" onunload="alert(\'de\')" onload="bajb_backdetect.BAJBFrame();"></iframe>\')
}
}
};
bajb_backdetect.Initialise();
</script><script type="text/javascript">
bajb_backdetect.OnBack = function()
{
alert(\'You clicked it!\');
}
</script>Any ideas on why I can't get anything out of it?
Last edited by gaufde (2015-08-17 10:04:50)
Graceson Aufderheide
gracesonaufderheide.com
Offline
Not a clue. I haven't messed with it. The demo I saw seemed to be as simple as including the script, then calling it.
Offline
I finally got it to work in a test. It turns out that I needed to delay the second script so that when it loads the firs one is there already. Here is the code that works for my site:
<script type="text/javascript" src="http://photography.gracesonaufderheide.com/BackDetect/backfix.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
bajb_backdetect.OnBack = function(){
alert(\'aldskfj\');
$(\'.highslide-close\').trigger( "click" );
}
});
</script>However, the way it is working right now is that after the alert appears and is accepted the window then goes back in history as normal. Is there a way to keep the browser from going back so that I can use the highslide close() function instead?
Graceson Aufderheide
gracesonaufderheide.com
Offline
Looking further into this, I have concluded that there is no reliable way to intercept or prevent the back button from doing its job. You can detect it, but you cannot stop it. So I guess people just need to figure out how better to Internet. The most we can do is utilize standard UX conventions as much as we can, and that's exactly what we've done: there's an X button to press in all gallery views.
I have noticed a disturbing tendency from Android users to hit the phone's Back button, rather than use the app or page UI to navigate a site. My girlfriend does it, and she's an intelligent and lovely girl, but she is not good at the Internet. These things we must simply accept.
Hopefully after doing the wrong thing once or twice, people will realize the thing they ought to be doing instead.
The other option you have is to simply not use the Highslide presentation; use the CE4 Gallery HTML presentation instead. Pressing the Back button will then always do exactly the expected thing.
Offline
Well, it was a good idea then. At least I learned some good things about Javascript. I agree that eventually there is only so much you can do because people have their own habits and ideas of how things work.
In addition to problem solving the back button method, I have been working on my original idea of having a bit of text popup. Basically I have two divs, one for desktop and one for mobile, which have been styled to look like a little text overlay. Then I pieced some script together from the internet to hide and show them. The way it works right now I have a time interval repeatedly check for a class that is only visible when a presentation view is open. Once the check is true the loop stops and the animations start.
Matthew, what do you think of this method? I am interested in your thoughts in terms of my coding strategy and execution as well as website viewer experience. Is there a better way to do this while still implementing it from phplugins, or would you insert the script into all the highslide documents instead?
I also appreciate other's opinions as I am still learning. Here is the script:
$('a.image-link, .size-large, .size-medium, .size-full').click(function() {
var counter = 0;
var popinterval = setInterval(function(){
if ($(".highslide-close").length > 0) {
clearInterval(popinterval);//CLEAR INTERVAL RIGHT AWAY
$(document).on('keyup',function(evt) {
if (evt.keyCode == 27) {
$(function () {
$('#highpop').hide();
clearInterval(popinterval);
});
}
});//END HIDE ON ESC
$('.highslide-close, .highslide-dimming, .highslide-image, .add-to-cart').click(function() {
$(function () {
$('#highpop').hide();
clearInterval(popinterval);
});
});//END HIDE ON CLICKS
$('#highpop').fadeIn('slow').delay(2000).fadeOut('slow');//END DISPLAY HIGHPOP DIV
}//END HIGHSLIDE POPUP
if ($(".mfp-img").length > 0) {
clearInterval(popinterval);//CLEAR INTERVAL RIGHT AWAY
$(document).on('keyup',function(evt) {
if (evt.keyCode == 27) {
$(function () {
$('#mfppop').hide();
clearInterval(popinterval);
});
}
});//END HIDE ON ESC
$('.img-close, .add-to-cart, .mfp-container').click(function() {
$(function () {
$('#mfppop').hide();
clearInterval(popinterval);
});
});//END HIDE ON CLICKS
$('#mfppop').fadeIn('slow').delay(2000).fadeOut('slow');//END DISPLAY MAGNIFIC DIV
}//END MAGNIFIC POP
counter++;
if(counter === 1200) {
clearInterval(popinterval);
}//END CLEAR INTERVAL AFTER 120 SECONDS
}, 100);//END 100ms INTERVAL
});// END CLICK FUNCTION
Here is a gallery which you can view the result in: http://photography.gracesonaufderheide. … and-white/
Graceson Aufderheide
gracesonaufderheide.com
Offline
I try really hard to avoid any time of interval checks. Having JS running constantly can really bog down your page as things pile up, and you never know quite how a specific device or browser is going to handle things. Better to use events, such as jQuery's on() or delegate() functions, or Javascript event listeners.
Highslide also has it's own event callbacks, such as on image change, on image close, etc. Just be mindful that you can't double up on callbacks, and several are already in use by the gallery.
Offline
Since what you were originally trying to do was have the back button navigate back to the gallery view, there might be some potential to using history.pushstate. I don't know enough Javascript to know if it is possible to get it working properly, but I think it might be doable.
Kyle Lucy Photography
kylelucy.com
Offline
The best way would be to have the slideshow add a URL hash on launch, then using Back would remove it. That would require some hacking, though, and might interfere in odd ways with other gallery features.
Offline
This would require support by Highslide or other JS that can interact with Highslide to perform the correct action as the address changes.
Offline
It sounds to me like messing with the browser's history will be touchy and possibly problematic. I think, then, that I will stick to my little text popups. I have been messing a little with the ideas Matthew gave me, but so far I haven't gotten it to work quite right. I guess it will take more time.
Graceson Aufderheide
gracesonaufderheide.com
Offline
I think you're probably wasting your time. The slideshow lacks a good foundation on which to make such edits. Maybe if it were built for this from the beginning, but that might have caused other problems. For example, we already use URL hashes for our slideshow tracking feature, so using that for browser history manipulation could potentially be a conflict. That's just one of many possible scenarios. There comes a point in these projects when I just swear off certain parts of them, because making further changes simply isn't worth the headaches and problems that it causes.
Offline
Okay, that is good to know. I will stay away from hashes and browser history. Mat, would you also recommend that I stop working on the text popups that I created with the javascript loop? I have been looking at what you said about using event listeners or on() functions to see if I can figure out a solution using them. Do you think that these too will cause many headaches?
Graceson Aufderheide
gracesonaufderheide.com
Offline
Pages: 1