title: how to have a view 1 item as overlay in index items webpage?
body: <p>I require two scenarios to work:</p>
  
  <p>Scenario 1:
  When my users click on <a href="http://example.com/items/3" rel="nofollow">http://example.com/items/3</a> or type the url into the url bar</p>
  
  <p>they will be directed to a webpage that has the item:id 3 shown in an overlay.</p>
  
  <p>When they click on the x in the overlay, they will either be shown /items index page (if they are logged in) OR the signup page (if they are not). </p>
  
  <p>When the item:id 3 is shown in overlay, the url in the bar will be /items/3
  When the /items is shown, the url will be /items</p>
  
  <p>Scenario 2:
  My logged in user is now at /items index page.</p>
  
  <p>She clicks on a /items/3 link. Instead of redirecting, the item:id 3 is shown in an overlay.</p>
  
  <p>WHen she clicks on the x in the overlay, she is back at /items index page.</p>
  
  <p>When the item:id 3 is shown in overlay, the url in the bar will be /items/3
  When the /items is shown, the url will be /items</p>
  
  <p><strong>What I want to achieve:</strong></p>
  
  <p>Both scenarios have the same look and feel especially for logged in users. the only difference is the starting point of the flow.</p>
  
  <p>Scenario 1 starts from the /items/3. Scenario 2 starts from /items.</p>
  
  <p>Both scenarios require the url in the url bar to change depending on whether the overlay is turned on or off.</p>
  
  <p><strong>What I have already done:</strong></p>
  
  <p>I have made Scenario 2 to work using ajax to fetch the data to populate the overlay.</p>
  
  <p>However the url does not change regardless what is shown.</p>
  
  <p>Scenario 1 is totally not done at all. I do not even know how to begin.</p>
  
  <p><strong>An example I found that displays Scenario 1</strong></p>
  
  <p>In facebook feed, your url is typically www.facebook.com</p>
  
  <p>When you click on a photo, you will see an overlay with the photo and the url changes to something like
  photo.php?fbid=10151124518657496&amp;set=a.10150255078032496.325973.527477495&amp;type=1&amp;theater</p>
  
  <p>When you close your overlay, you go back to your feed and the url changes back to www.facebook.com</p>
  
  <p><strong>My question</strong></p>
  
  <p>What is the basic architectural solution to achieve my objectives?</p>