Announcement

Collapse
No announcement yet.

Slideshow with hyperlinks

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    Slideshow with hyperlinks

    In these forums, I have seen some simple java code for slideshows but did not see any that included hyperlinks. I only want to have three or four jpeg images on the homepage "image area" of the website with links. I'm using a dev site to change from the old mmui to a full css using the MIVA css perfume store template.
    Should I use gif images or is jpeg ok for the purpose?
    I found this code from caronec and Bruce and it works for the slideshow. Where should I add the href= ?
    Thanks.

    <html>
    <head>
    <script type="text/javascript">
    <!--
    var image1=new Image()
    image1.src="/mm5/graphics/00000001/ABBA_Pure_Gentle_Shampoo_8_45_oz_sm.jpg"
    var image2=new Image()
    image2.src="/mm5/graphics/00000001/ABBA_Pure_Volume_Shampoo_8_45_oz_sm.jpg"
    var image3=new Image()
    image3.src="/mm5/graphics/00000001/Abba_Pure_Performance_Hair_Care_Daily_Shampoo_Clea nse_Normal_33_8oz_sm.jpg"
    //-->
    </script>
    </head>
    <body>
    <img src="/mm5/graphics/00000001/ABBA_Pure_Gentle_Shampoo_8_45_oz_sm.jpg" name="slide" width="600" height="250" />
    <script>
    <!--
    //variable that will increment through the images
    var step=1
    function slideit(){
    //if browser does not support the image object, exit.
    if (!document.images)
    return
    document.images.slide.src=eval("image"+step+".src" )
    if (step<3)
    step++
    else
    step=1
    //call function "slideit()" every 7.5 seconds
    setTimeout("slideit()",2500)
    }
    slideit()
    //-->
    </script>
    </body>
    </html>
    Tags: None
    #2
    Re: Slideshow with hyperlinks

    With so many slideshow load options this could be more complicated than I thought. I have just enough html knowledge to be dangerous and I run into occasional challenges when I'm dealing with mvt code. Does anyone have a recommendation for a simple css editor software that could help me with this. Did not want to have to invest in something like dreamweaver for the amount of use I would give it.

    Comment

      #3
      Re: Slideshow with hyperlinks

      Bossier,
      I really like the jQuery-based Easy Slider here:

      http://cssglobe.com/post/5780/easy-s...-jquery-slider

      There aren't step-by-step instructions that I've seen, but you can take a look at the demos. You need to link to the jQuery library, link to the Easy Slider JS and CSS files, and then put in an unordered list, where each list element is one slide with its corresponding HTML.

      We've used this on several storefronts and it works really well.
      Susan Petracco
      NetBlazon

      1.866.400.2444
      _____________________________________________

      Like us on Facebook

      Comment

        #4
        Re: Slideshow with hyperlinks

        Hello,

        I think Susan provided a nice solution that would be worth looking into. However, if you are looking for something really basic I think the below code offers a very simple "slideshow" with links.

        1. Add the following code within the <head> tag of your home page (this will load the jQuery library and necessary 'slideshow' code):
        Code:
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function slideSwitch() {
    var $active = $('#slideshow div.active');

    if ( $active.length == 0 ) $active = $('#slideshow div:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow div:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});
</script>
        2. Add the following CSS to your existing style-sheet (or simply copy and paste this into the <head> tag of your home page - don't forget to remove the <style> tag & </style> if you are adding this code to an external style-sheet):
        Code:
        <style type="text/css">
#slideshow {
    position:relative;
    height:350px;
}

#slideshow div {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow div.active {
    z-index:10;
    opacity:1.0;
}

#slideshow div.last-active {
    z-index:9;
}
</style>
        3. Add the following html to you homepage body:
        Code:
        <div id="slideshow">
    <div class="active"><a href="http://www.google.com"><img src="img1.jpg" alt="" border="0" /></a></div>
    <div><a href="http://www.yahoo.com"><img src="img2.jpg" alt="" border="0" /></a></div>
    <div><a href="http://www.bing.com"><img src="img3.jpg" alt="" border="0" /></a></div>
    <div><a href="http://www.ask.com"><img src="img4.jpg" alt="" border="0" /></a></div>
</div>
        You may need to tweak the CSS depending on your image sizes (see the 'height:350px;' set on the slideshow id) or add CSS to get proper placement on the page.

        Comment

          #5
          Re: Slideshow with hyperlinks

          Susan and blarson,
          Thank you for the helpful suggestions. That was what I needed.

          Comment

            #6
            Re: Slideshow with hyperlinks

            HELP PLEASE: I have tried to implement this and here is my problem:

            All four images are displayed all at once. I can see the opacity transition happen from one image to the next, and when I do an "inspect element" in google chrome I can see each element becoming class="active" while the prior one becomes class="active last-active". So I know that the jQuery library and slideshow code seems to be loading correctly.

            The problem is that all four images are being displayed all at once. Here is the test code I'm using:

            Code:
            <!-- Home Page Main Image-->
<div id="slideshow">
    <div class="active"><a href="http://www.google.com"><img src="graphics/00000001/test1.jpg" alt="" border="0" /></a></div>
    <div><a href="http://www.yahoo.com"><img src="graphics/00000001/test2.jpg" alt="" border="0" /></a></div>
    <div><a href="http://www.bing.com"><img src="graphics/00000001/test3.jpg" alt="" border="0" /></a></div>
    <div><a href="http://www.ask.com"><img src="graphics/00000001/test4.jpg" alt="" border="0" /></a></div>
</div>
            I have inserted this code in the CONTENT tab of the SFNT (Storefront) page in place of the header code that was there. Here is the code that I replaced:

            Code:
            <div id="header">
<mvt:if expr="NOT ISNULL l.settings:skincust:homepage_image_link">  
            <a href="&mvte:skincust:homepage_image_link;"/><span>Header Section</span></a>
        </mvt:if>
</div>
            Unfortunately, this is what it looks like on the page:

            snap.jpg

            Can somebody please tell me what I'm doing wrong? Thanks so much!!!

            Comment

              #7
              Re: Slideshow with hyperlinks

              I figured it out. There is an error in the CSS code provided in this post.

              Code:
              #slideshow div.last-active {
    z-index:9;
              Had to be changed to

              Code:
              #slideshow div.last-active {
    z-index:9;
    opacity:0.0;
              It appears that this is required to reset the opacity, otherwise the last active of each remains as opacity 1

              Comment

                #8
                Re: Slideshow with hyperlinks

                Hi Blarzon,

                Thanks a lot for this post. I implemented and it works great (categories of www.sophiacostas.com), do you have any idea:
                - what I have to change to have a simple text below each image (I added a "title" to each image)
                - what I have to add to have a simple pause/play feature

                Again Thank you. This was so much easier than any other slideshow I found.

                Aurelie

                Comment

                  #9
                  Re: Slideshow with hyperlinks

                  abrieuc,

                  Fairly simple changes...

                  Changes to the script (for play/pause & also fixes some opacity issues Tread-Not pointed out in previous post and opacity issues for adding a title):


                  Code:
                  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow div.active');
if ( $active.length == 0 ) $active = $('#slideshow div:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow div:first');
$active.addClass('last-active');
// Following line fixes some opacity issues
$(".last-active").css({opacity: 0.0})

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

// Below changes adds play pause function
var playSlideshow = setInterval( "slideSwitch()", 5000 );


$(function() {
$("#pause").click(function() {
clearInterval(playSlideshow);
});
});
$(function() {
$("#play").click(function() {
playSlideshow = setInterval( "slideSwitch()", 5000 );
});
});

</script>


                  Some changes and additions to the CSS:


                  Code:
                  <style type="text/css">#slideshow {
position:relative;
/*Remember to adjust the height to the size of your images*/
height:400px;
}
#slideshow div {
position:absolute;
top:0;
left:0;
z-index:8;
/*IE opacity bug fix*/
filter: Alpha(Opacity=0);
opacity:0.0;
text-align:center;
}
#slideshow div.active {
z-index:10;
/*IE opacity bug fix*/
filter: Alpha(Opacity=100);
opacity:1.0;
}
#slideshow div.last-active {
z-index:9;
/*IE opacity bug fix*/
filter: Alpha(Opacity=0);
opacity:0.0;
}
#play {cursor:pointer;}
#pause {cursor:pointer;}

</style>


                  Concerning adding titles - rather than using the "image title" like you mention I would just add some html to each <div>

                  Using your category page html following code adds a title and play/pause "buttons":


                  Code:
                  <div id="category-header"><table width="100%" border="0">
<tr>
<td><div id="play" align="left">[play]</div></td>
<td><div id="pause" align="right">[Pause]</div></td>
</tr>
</table>
<div id="slideshow">
<div class="active"><p>Rainbow Scarf</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall01.jpg" alt="Rainbow Scarf" border="0" /></div>
<div><p>Rainbow Scarf, Tova Striped Hat</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall02.jpg" alt="Rainbow Scarf, Tova Striped Hat" border="0" /></div>
<div><p>Stripa Mittens, Hats and Scarves</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall03.jpg" alt="Stripa Mittens, Hats and Scarves" border="0" /></div>
<div><p>Rhino Wool Scarf</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall04.jpg" alt="Rhino Wool Scarf" border="0" /></div>
<div><p>Arrowtribe Scarf</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall05.jpg" alt="Arrowtribe Scarf" border="0" /></div>
<div><p>Arrowtribe Scarf</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall06.jpg" alt="Arrowtribe Scarf" border="0" /></div>
<div><p>Animal Print Wool Scarves</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall07.jpg" alt="Animal Print Wool Scarves" border="0" /></div>
<div><p>Bella Hat, Animal Print Wool Scarves</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall08.jpg" alt="Bella Hat, Animal Print Wool Scarves" border="0" /></div>
<div><p>Llama Wool Scarf</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall09.jpg" alt="Llama Wool Scarf" border="0" /></div>
<div><p>Isa Scarf</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall10.jpg" alt="Isa Scarf" border="0" /></div>
<div><p>Tova Striped Hat, Elephant Wool Scarf</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall11.jpg" alt="Tova Striped Hat, Elephant Wool Scarf" border="0" /></div>
<div><p>Llama Wool Scarf</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall12.jpg" alt="Llama Wool Scarf" border="0" /></div>
<div><p>Llama Wool Scarf</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall13.jpg" alt="Llama Wool Scarf" border="0" /></div>
<div><p>Bella Hat, Sheep Wool Scarf</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall14.jpg" alt="Bella Hat, Sheep Wool Scarf" border="0" /></div>
<div><p>Sheep Wool Scarf</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall15.jpg" alt="Sheep Wool Scarf" border="0" /></div>
<div><p>Star Wool Scarf, Vintage Jacket and Pantyhose</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall16.jpg" alt="Star Wool Scarf, Vintage Jacket and Pantyhose" border="0" /></div>
<div><p>Star Wool Scarf, Vintage Jacket and Pantyhose</p><br /><img src="graphics/00000001/SophiaCostas_2012Fall17.jpg" alt="Star Wool Scarf, Vintage Jacket and Pantyhose" border="0" /></div>
</div>
</div>

                  I looked at this in FF, Chrome, IE 7 & 8 but I did not test it extensively...just an FYI.

                  Good luck!

                  Comment

                    #10
                    Re: Slideshow with hyperlinks

                    Thank you so much. I want to hug you right now!
                    When I update the html, then the css everything is fine (except the title of the images overlap). But then when I update the javascript, the second pic doesn't show and turns blank?
                    I am in the right direction......

                    Comment

                      #11
                      Re: Slideshow with hyperlinks

                      Looking at your code there are two small errors when you added the script updates that are causing the script to break/error. You are missing some periods.

                      Your code:
                      Code:
                      addClass('active') 
animate({opacity: 1.0}, 1000, function() {
                      It you look at my previous post those two lines should be:

                      Code:
                      .addClass('active')
.animate({opacity: 1.0}, 1000, function() {

                      Comment

                        #12
                        Re: Slideshow with hyperlinks

                        for some reason this is not functioning correctly on google chrome. Anyone have any idea why? love the slideshow just wondering why it won't work on chrome but works on ie and firefox and safari
                        Nick Harkins
                        www.loveisarose.com

                        Comment

                          #13
                          Re: Slideshow with hyperlinks

                          Hi SidFeyDesigns,


                          Can you provide your code or a link? When I posted the code back in Feb of 2012 I tested in Chrome and it was working fine. Could be a chrome version update or something with your specific code. Thanks

                          Comment

                            #14
                            Re: Slideshow with hyperlinks

                            well we decided we didn't want to use it anyways. thanks for the reply, it is much appreciated.
                            Nick Harkins
                            www.loveisarose.com

                            Comment

                            Previous template Next
                            Working...
                            X