Persistent jQuery

Question

So I have a scripting question and need some help

I figured one of you guys might be able to help me out with this.

I want to build a simple concept site that I can expand later but for now here's what I would like to happen

I would like an index page with a single image on it. here's where it gets tricky.

I would like there to be several "hidden" sub-pages of the index that simply contain a script that will automatically run when that particular sub-page is visited that will change the image on the index page to a designated image until another sub-page is visited.

i.e....

www.thisparticularwebsite.com (index/home/landing page) has an image on it

www.thisparticularwebsite.com/sub-page-1 is visited

www.thisparticularwebsite.com now has the designated image assigned to sub-page-1 and remains that way if www.thisparticularwebsite.com is visited

www.thisparticularwebsite.com/sub-page-2 is visited

www.thisparticularwebsite.com (index/home/landing page) now has the new designated image assigned to sub-page-2 and remains that way until another sub page is visited

and so on and so-forth

I don't need...or want...it to be random images...

It makes sense in my head...I hope it came across as intended. How do I make this happen? I have an idea for a simple interactive project (it seems relatively simple to me at least) that I'd like to start if someone would be willing to spend a little time and help me get that part of it up and working. If any of you have an idea as to how to do this...that would be awesome!

@Kirk: If the "sub pages" are simply standalone static pages for a prototype / demo then surely there is no need to dynamically be setting images to appears / dissapear? Why not just create a single page, copy it multiple times and change the image inside each? This is likely to be closer to what you will end up requiring for a live site than the suggested prototyping description? — Brian Scott, Mar 25 '11 at 09:18
@Kirk: Also, what language are you planning to implement the site in? If it's something like ASP .Net then you could use a simple MasterPage which is essentially your "index" layout and then simply create a few pages with this masterpage changing the image in the various content placeholder areas. — Brian Scott, Mar 25 '11 at 09:19
This is a question from a friend, I want to show him how powerful SO is :) I think he means he wants a single.js file that simply has an multi-part array of image paths and page paths. So when a page is accessed it sees the URL and displays the image.. Maybe the jQuery URL plugin? — Kirk Strobeck, Mar 25 '11 at 09:23
@Brian - I'd like to do this language abstracted ( ie. JS can do it, how would it be done best in JS ). Good question tho. Thnx! — Kirk Strobeck, Mar 25 '11 at 09:24
@Kirk: Fair enough but I genuinely think that the approach of using JS in this example is fundamentally flawed. — Brian Scott, Mar 25 '11 at 09:26
@Brian - I agree, but good learning example to show what JS can do — Kirk Strobeck, Mar 25 '11 at 09:34

Tengiz · Answer 1 · 2011-03-25T10:53:29.023

If you want this to happen for the particular user, then using cookies is quite enough for it:

Let each of sub-pages save their corresponding image URLs to the cookies.
Let the landing page show the image using the URL loaded from the cookies.

Example of working with cookies from JavaScript can be found here: JavaScript Cookies

But if you want all users to see the image of last visited sub-page, then you will need some server-side stuff for it:

Choose some kind of store where you are going to store the image URL, e.g. database/file system/cache (less likely - this can expire), etc.
Let each of sub-pages save their corresponding image URLs to the store.
Let the landing page show the image using the URL loaded from the store.

Example of working with database from ASP.NET (C#) code can be found here: SqlCommand Class

I hope this helps.

I added URLs for some reference information to my answer. I cannot give more details, maybe you need to find a companion who can implement it in life? — Tengiz, Mar 25 '11 at 09:38

score 1 · Accepted Answer · edited May 23 '17 at 12:11

Use a param per page which is the index of your image on the page. Have each image initially set to style="display:none" to ensure that it doesn't render in the markup. Then check the current param on the page url to determine the index of the particular image to display such as the following:

Markup:

<html>
...
<img src='...../image1.gif' />
<img src='...../image2.gif' />
<img src='...../image3.gif' />
...
</html>

Example URL:

http://locahost/aaaa.html?imgIndex=1

jquery to show particular image

Credit to Artem Bager for url param function here

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

$(document).ready(function() {
var imgIndex = (int)getParameterByName('imgIndex');
$('img').eq(imgIndex).show();
});

This keeps the solution completely scripted as per the original request. However, as per my comments I believe this requested approach is flawed.

score 0 · Answer 3 · answered Mar 25 '11 at 09:22

0

If it is all the same domain you could use a series of cookies. if your users will be submitting forms you can get the values from there.

Definitely need some more information about the platforms you want to use.

answered Mar 25 '11 at 09:22

tamarintech

1,972
12
17

Persistent jQuery

3 Answers3