Home/ Questions/Q 6543199
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T11:19:05+00:00

This is pretty much what I want to do…. So, the user is browsing

  • 0

This is pretty much what I want to do….

So, the user is browsing my site and they click on a “View by categories” link, this link opens a pop-up window with a series of pictures, that link to different parts of my site. When the user clicks one of those, I want to be able to close the pop-up window and open the link in the original window.

Can anyone help?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I wouldn’t recommend using pop-up for navigation because of pop-up blockers. Use some in-document solutions:

    You can use Fancybox jQuery plugin for this: http://fancybox.net/

    It has cool functionality to insert a bunch of HTML into its popup-style window.

    After clicking a link in your fancybox window the document will reload.

    EDIT:

    <a id="categories-trigger" href="#categories">View by categories</a>
<div class="hidden-categories">
  <div id="categories"> 
    <!-- Your code from the link you provided. Only from inside <body> tag -->
  </div> 
</div>

    and JS code:

    <script type="text/javascript">
    $(function(){
      $("#categories-trigger").fancybox({ /* fancybox parameters here */ });
    });
</script>

    You need to include jQUery and jquery.fancybox JS scripts of course.

    and additional CSS code:

    .hidden-categories #categories{
  display:none;
}

    EDIT 2

    #categories{
  overflow: auto;
  width: 820px;
  height: 820px;
}

    My mistake was that fancybox content can’t be hidden by default but only in a container. After these changes fancybox will work.

    EDIT 3

    Try to change JS code to this one:

    $(window).load(function(){
  $("#categories-trigger").fancybox({ /* fancybox parameters here */ });
});

    The script will execute after loading images.

    • 0