Persistent jQuery
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
ww开发者_开发技巧w.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!
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.
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.
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.
加载中,请稍侯......
精彩评论