Question

I’d like to use an image slider plugin (Elastislide) as a menu. The problem is that it uses <a href="#"> as a function and can’t be used as a link. I’ve tried. So, I’m looking for a jQuery solution to use the images/captions or a <li> as a pseudo-link.

The pages are all local, so I don’t need to go to another domain, just another page in the same directory. Here’s an example of the HTML

        <div id="carousel" class="es-carousel-wrapper">

        <div class="es-carousel">

        <ul>

    <li value="another_page.php"><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
    <li value="yet_another.php"><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
    <li value="still_another.php"><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
    <li value="last_one.php"><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>

</ul>
</div>
</div>

I added the value getting a clue from another post.

Answer 1

If you can add a class to each li, you could easily reference that class and do something like:

$(".li-class").on("click", function(e) {
    $("#IDofSomeLoadAreaDiv").empty().load($(this).attr("value"));
});

Tho you might need to change the link in those value’s to represent the whole link and not just a partial

Also, if you added something like myURL Extension, you could do something like:

$(".li-class").on("click" function(e) {
    $("#IDofSomeLoadAreaDiv").empty().load($.myURL("index", $(this).attr("value")));
});
// and this would eliminate the need to assure correct full link in each li, 
// as it would call your base site url, add index.php to it and then add 
// the link in your li.value

It appears I may have misread the question, if you’re not looking to load the view partial into the current page. In other words, if you want to “refresh” the page with the new link, do the following:

$(".li-class").on("click", function(e) {
    window.location = $(this).attr("value");
});
// or with myURL extension if you want
$(".li-class").on("click" function(e) {
    window.location = $.myURL("index", $(this).attr("value"));
});

ALSO! If you want to open it in a new window, I also have a simple jQuery Extension for that (see jsFiddle Here, copy the js code between the long commented lines) that can make it as easy as:

$(".li-class").on("click" function(e) {
    $.winOpen($.myURL("index", $(this).attr("value")), "windowName", { fullscreen: "no", height: "600px", toolbar: 1, width: 600 });
});

BIG UPDATE: The fiddle helped, helped to know you where using an older jQuery

With that version of jQuery you don’t have .on, you also where trying to use the myURL plugin without actually adding the plugin.
I’ve recreated working version of your fiddle HERE

IF you want to use that plugin, you’ll either need to add it to your header or create a js file for it and link it in your header like any other jquery plugin, if not, you can just create the links directly as shown in previous examples.

More UPDATE: Found issue where that ver of jQuery won’t support just any attr (aka “value”) from an element. Changed <li value=" to <li href=" and crrected it in the javascript call as well.

Also, to make that location call without the myURL plugin you could simply replace:

window.location = $.myURL("index", $(this).attr("value"));

with

window.location = $(this).attr("value");

But, remember, that means making sure you have the FULL site url on each li’s href attr