Magento Expert Forum - Improve your Magento experience

Results 1 to 6 of 6

How to get slideshow code into my website?

  1. #1

  2. #2
    Junior Member
    Join Date
    Aug 2016
    Posts
    41
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    To add the slideshow code into my website add the following code around the jquery code:
    <script type="text/javascript" src="http://ajax.googleapis.com/aja..."></script>
    <script type="text/javascript">
    $(function(){
    PASTE JQUERY CODE FROM ABOVE RIGHT HERE...
    });
    </script>

  3. #3
    Junior Member
    Join Date
    Dec 2015
    Location
    USA
    Posts
    32
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    <html><head>

    <title>Image Slideshow</title>

    <style type="text/css">

    /* All Styles Optional */

    * {
    font-family:calibri,arial;
    font-size:16pt;
    }

    div#show {
    background-color:#efefe7;
    width:400px;
    margin:0; padding:2px;
    border:1px solid #909090;
    }

    div#show table input, div#show4 table input {
    outline-style:none;
    }

    </style>

    <!--[if IE]>
    <style type="text/css">
    div#show table td, div#show4 table td {
    height:21px;
    }
    </style>
    <![endif]-->

    <script src="swissarmy.js" type="text/javascript"></script>

    <script src="slideshow.js" type="text/javascript"></script>

    </head>

    <body style="margin:0; padding:0;">

    <div id="show"><script type="text/javascript">new inter_slide(slideShow)</script></div>

    </body>

    </html>

  4. #4
    Junior Member
    Join Date
    Aug 2016
    Posts
    41
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    Step 1: Login magento admin panel goto pages under CMS
    Click on content and enter below code


    <!--Image Slider Start-->
    <div id="slide" align="center">
    <script type="text/javascript">// <![CDATA[
    var image1=new Image()
    image1.src="{{skin url=images/media/slideshow/1.jpg}}"
    var image2=new Image()
    image2.src="{{skin url=images/media/slideshow/2.jpg}}"
    var image3=new Image()
    image3.src="{{skin url=images/media/slideshow/3.jpg}}"
    var image4=new Image()
    image4.src="{{skin url=images/media/slideshow/4.jpg}}"
    var image5=new Image()
    image5.src="{{skin url=images/media/slideshow/5.jpg}}"
    // ]]></script>
    <a href="http://www.outsourcing4work.de/en/so...nto-developer/"> <img src="{{skin url=images/1.jpg}}" alt="" name="slide" width="900" height="277" border="2" /></a>
    <script type="text/javascript">// <![CDATA[
    //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 2.5 seconds
    setTimeout("slideit()",5000)
    }
    slideit()
    // ]]></script>
    </div>
    <!--Image Slider End-->



    Step 2: Go to below folder
    skin/frontend/default/Your_theme/images/media/
    create a folder(name:slideshow)
    put 5 image files(give name 1.jpg,2.jpg,3.jpg,4.jpg,5.jpg)
    and reload

    meanwhile refresh and flush you magento cache

  5. #5
    Junior Member
    Join Date
    Aug 2016
    Posts
    41
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    Step 1: Insert the below into the <head> section of your page:

    <script language="JavaScript1.1">
    <!--

    /*
    JavaScript Image slideshow:
    By JavaScript Kit (http://www.outsourcing4work.de/en/so...ipt-developer/)
    Over 200+ free JavaScript here!
    */

    var slideimages=new Array()
    var slidelinks=new Array()
    function slideshowimages(){
    for (i=0;i<slideshowimages.arguments.length;i++){
    slideimages[i]=new Image()
    slideimages[i].src=slideshowimages.arguments[i]
    }
    }

    function slideshowlinks(){
    for (i=0;i<slideshowlinks.arguments.length;i++)
    slidelinks[i]=slideshowlinks.arguments[i]
    }

    function gotoshow(){
    if (!window.winslide||winslide.closed)
    winslide=window.open(slidelinks[whichlink])
    else
    winslide.location=slidelinks[whichlink]
    winslide.focus()
    }

    //-->
    </script>

    Step 2: Insert the below into the <body> section of your page where you wish the slideshow to appear:

    <a href="javascript:gotoshow()"><img src="food1.jpg" name="slide" border=0 width=300 height=375></a>
    <script>
    <!--

    //configure the paths of the images, plus corresponding target links
    slideshowimages("food1.jpg","food2.jpg","food3.jpg ","food4.jpg","food5.jpg")
    slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285","http://food.epicurious.com/run/recipe/view?id=10092","http://food.epicurious.com/run/recipe/view?id=100975","http://food.epicurious.com/run/recipe/view?id=2876","http://food.epicurious.com/run/recipe/view?id=20010")

    //configure the speed of the slideshow, in miliseconds
    var slideshowspeed=2000

    var whichlink=0
    var whichimage=0
    function slideit(){
    if (!document.images)
    return
    document.images.slide.src=slideimages[whichimage].src
    whichlink=whichimage
    if (whichimage<slideimages.length-1)
    whichimage++
    else
    whichimage=0
    setTimeout("slideit()",slideshowspeed)
    }
    slideit()

    //-->
    </script>
    <p align="center"><font face="arial" size="-2">This free script provided by</font><br>
    <font face="arial, helvetica" size="-2"><a href="http://www.outsourcing4work.de/en/software/javascript-developer/">JavaScript
    Kit</a></font></p>

  6. #6
    New member
    Join Date
    Dec 2016
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Specialized accessories may very well be required for hauling serious home furnishings and also other solutions together with experts movers are able to present you with correct accessories which means that your prized items may not be affected in any respect.

    Packers and Movers Hyderabad @ https://ad-vision.co.in/packersmovershyderabad.html
    Packers and Movers Bangalore @ https://ad-vision.co.in/packersmoversbangalore.html
    Packers and Movers Mumbai @ https://ad-vision.co.in/packersmoversmumbai.html
    Packers and Movers Chennai @ https://ad-vision.co.in/packersmoverschennai.html
    Packers and Movers Delhi @ https://ad-vision.co.in/packersmoverdelhi.html
    Packers and Movers Noida @ https://ad-vision.co.in/packersmoversnoida.html
    Packers and Movers Gurgaon @ https://ad-vision.co.in/packersmoversgurgaon.html
    Packers and Movers Pune @ https://ad-vision.co.in/packersmoverspune.html

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •