The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Clickable image links in accordion?

Go down

Solved Clickable image links in accordion?

Post by Dustination on September 29th 2014, 9:16 am

Hello,
I have just added an accordion index to my site, and I was wondering if there was any way to make the images found in said index link to a page on the forum?
For example- If I click on the image that scrolls by, it would redirect me to a different page.
Sorry if this sounds confusing.
Here is my forum if that helps any:
http://projectcrusade.forumotion.com/

Thank you!


Last edited by Dustination on October 8th 2014, 2:40 am; edited 2 times in total

Dustination
Forumember

Posts : 29
Reputation : 1
Language : English

http://projectcrusade.forumotion.com/

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by SLGray on September 29th 2014, 10:10 am

Please post the code you use.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41909
Reputation : 2881
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by Dustination on September 29th 2014, 10:22 am

@SLGray wrote:Please post the code you use.

CSS:
Code:
.accordion {
  text-align:left;
  font:'Helvetica Neue', Verdana, Arial, sans-serif;
}
.accordion ol {
  position: relative;
  overflow: hidden;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.accordion li > h2 {
  color: black;
  font-weight: normal;
  margin: 0;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: right top;
  -moz-transform: translateX(-100%) rotate(-90deg);
  -moz-transform-origin: right top;
  -o-transform: translateX(-100%) rotate(-90deg);
  -o-transform-origin: right top;
  -ms-transform: translateX(-100%) rotate(-90deg);
  -ms-transform-origin: right top;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; }
.accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%9; left: 10%; left: 5%9; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
.accordion li > h2:hover { cursor: pointer; }
.accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; }
.accordion noscript p { padding: 10px; margin: 0; background: white; }
 
/****************************************** Basic */
.basic li > h2 { background: #333; color: white; line-height: 1.8em; }
.basic li > div h3 { margin: 15px 10px; }
.basic li > div p { margin: 10px; font-size: 14px; }
 
/****************************************** Dark */
.dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
.dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
.dark li > h2 span { background: #353535; color: white; }
.dark li > h2 b { background: #353535; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }
.dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); }
.dark h2.selected b { background: #434343; }
.dark li > div { background: #030303; margin-left: 5px; }
 
/*************************************** Rounded */
.rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
 
/***************************************** Light */
/**************************************** Stitch */

#s1 {
 background:url("https://dl.dropboxusercontent.com/u/184353366/FORUM/news2andahalf.png") no-repeat #030303;
}
#s2 {
 background:url("https://dl.dropboxusercontent.com/u/184353366/FORUM/news2.png") no-repeat #030303;
}
#s3 {
 background:url("https://dl.dropboxusercontent.com/u/184353366/FORUM/news3.png") no-repeat #030303;
}

#s4 {
 background:url("https://dl.dropboxusercontent.com/u/184353366/FORUM/news4.png") no-repeat #030303;
}

#s5 {
 background:url("http://url de l'image.jpg") no-repeat #030303;
}

Javascript (1):
Code:
/*************************************************
    *
    *  project:    liteAccordion - horizontal accordion plugin for jQuery
    *  author:    Nicola Hibbert
    *  url:        http://nicolahibbert.com/horizontal-accordion-jquery-plugin
    *  demo:        http://www.nicolahibbert.com/demo/liteAccordion
    *
    *  Version:    1.1.3
    *  Copyright:    (c) 2010-2011 Nicola Hibbert
    *
    /*************************************************/
    (function($) {
     
      $.fn.liteAccordion = function(options) {
               
          // defaults
          var defaults = {
            containerWidth : 850,
            containerHeight : 200,
            headerWidth : 48,
           
            firstSlide : 1,
            onActivate : function() {},
            slideSpeed : 800,
            slideCallback : function() {},       
           
            autoPlay : false,
            pauseOnHover : false,
            cycleSpeed : 4300,

            theme : 'basic', // basic, light*, dark, stitch*
            rounded : false,
            enumerateSlides : false
          },
         
          // merge defaults with options in new settings object           
            settings = $.extend({}, defaults, options),
     
          // define key variables
            $accordion = this,
            $slides = $accordion.find('li'),
            slideLen = $slides.length,
            slideWidth = settings.containerWidth - (slideLen * settings.headerWidth),
            $header = $slides.children('h2'),
           
          // core utility and animation methods
            utils = {
                getGroup : function(pos, index) {     
                  if (this.offsetLeft === pos.left) {
                      return $header.slice(index + 1, slideLen).filter(function() { return this.offsetLeft === $header.index(this) * settings.headerWidth });
                  } else if (this.offsetLeft === pos.right) {
                      return $header.slice(0, index + 1).filter(function() { return this.offsetLeft === slideWidth + ($header.index(this) * settings.headerWidth) }); 
                  }               
                },
                nextSlide : function(slideIndex) {
                  var slide = slideIndex + 1 || settings.firstSlide;

                  // get index of next slide
                  return function() {
                      return slide++ % slideLen;
                  }
                },
                play : function(slideIndex) {
                  var getNext = utils.nextSlide((slideIndex) ? slideIndex : ''), // create closure
                      start = function() {
                        $header.eq(getNext()).click();
                      };
                 
                  utils.playing = setInterval(start, settings.cycleSpeed);       
                },
                pause : function() {
                  clearInterval(utils.playing);
                },
                playing : 0,
                sentinel : false
            };     
         
          // set container heights, widths, theme & corner style
          $accordion
            .height(settings.containerHeight)
            .width(settings.containerWidth)
            .addClass(settings.theme)
            .addClass(settings.rounded && 'rounded');
         
          // set tab width, height and selected class
          $header
            .width(settings.containerHeight)
            .height(settings.headerWidth)
            .eq(settings.firstSlide - 1).addClass('selected');
         
          // ie :(
          if ($.browser.msie) {
            if ($.browser.version.substr(0,1) > 8) {
                $header.css('filter', 'none');
            } else if ($.browser.version.substr(0,1) < 7) {
                return false;
            }
          }
         
          // set initial positions for each slide
          $header.each(function(index) {
            var $this = $(this),
                left = index * settings.headerWidth;
               
            if (index >= settings.firstSlide) left += slideWidth;
           
            $this
                .css('left', left)
                .next()
                  .width(slideWidth)
                  .css({ left : left, paddingLeft : settings.headerWidth });
           
            // add number to bottom of tab
            settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');       

          }); 
               
          // bind event handler for activating slides
          $header.click(function(e) {
            var $this = $(this),
                index = $header.index($this),
                $next = $this.next(),
                pos = {
                  left : index * settings.headerWidth,
                  right : index * settings.headerWidth + slideWidth,
                  newPos : 0
                },
                $group = utils.getGroup.call(this, pos, index);
                           
            // set animation direction
            if (this.offsetLeft === pos.left) {
                pos.newPos = slideWidth;
            } else if (this.offsetLeft === pos.right) {
                pos.newPos = -slideWidth;
            }
           
            // check if animation in progress
            if (!$header.is(':animated')) {

                // activate onclick callback with slide div as context     
                if (e.originalEvent) {
                  if (utils.sentinel === this) return false;
                  settings.onActivate.call($next);
                  utils.sentinel = this;
                } else {
                  settings.onActivate.call($next);
                  utils.sentinel = false;
                }

                // remove, then add selected class
                $header.removeClass('selected').filter($this).addClass('selected');
           
                // get group of tabs & animate       
                $group
                  .animate({ left : '+=' + pos.newPos }, settings.slideSpeed, function() { settings.slideCallback.call($next) })
                  .next()
                  .animate({ left : '+=' + pos.newPos }, settings.slideSpeed);
                     
            }
          });
           
          // pause on hover       
          if (settings.pauseOnHover) {
            $accordion.hover(function() {
                utils.pause();
            }, function() {
                utils.play($header.index($header.filter('.selected')));
            });
          }
               
          // start autoplay, call utils with no args = start from firstSlide
          settings.autoPlay && utils.play();
         
          return $accordion;
         
      };
     
    })(jQuery);

Javascript (2):
Code:
$(document).ready(function(){
    $('#one').liteAccordion({
                  onActivate : function() {
                      this.find('figcaption').fadeOut();
                  },
                  slideCallback : function() {
                      this.find('figcaption').fadeIn();
                  },
                  autoPlay : true,
                  pauseOnHover : true,
                  theme : 'dark',
                  rounded : true,
                  enumerateSlides : true           
            }).find('figcaption:first').show();
    });


Homepage Message:
Code:
<div id="one" class="accordion">
            
   <ol>
                   
      <li>
                          
         <h2>
              <span>2014 - 09 - 21</span> 
         </h2>
                          
         <div id="s1">
               
         </div>
                      
      </li>
                   
      <li>
                          
         <h2>
              <span>2014 - 09 - 19</span> 
         </h2>
                          
         <div id="s2">
               
         </div>
                      
      </li>
                   
      <li>
                          
         <h2>
              <span>2013 - 06 - 18</span> 
         </h2>
                          
         <div id="s3">
               
         </div>
                      
      </li>
                   
      <li>
                          
         <h2>
              <span>2013 - 06 - 10</span> 
         </h2>
                          
         <div id="s4">
               
         </div>
                      
      </li>
             
   </ol>
         <noscript>        <p>Please enable JavaScript to get the full experience.</p>    </noscript>
</div>

Wasn't sure which one you needed, sorry.

Dustination
Forumember

Posts : 29
Reputation : 1
Language : English

http://projectcrusade.forumotion.com/

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by SLGray on September 29th 2014, 10:28 am

In the homepage message, you will want to add images like this:
Code:
[url=LINK TO PAGE TO LOAD][img]IMAGE'S URL[/mg][/url]


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41909
Reputation : 2881
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by Dustination on September 29th 2014, 10:41 am

I apologize, I'm very, very basic at this.
Where in the homepage message code would I place them? I tried multiple places and it didn't work out. Thanks, sorry.

Dustination
Forumember

Posts : 29
Reputation : 1
Language : English

http://projectcrusade.forumotion.com/

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by SLGray on September 29th 2014, 7:21 pm

Have you added the images already?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41909
Reputation : 2881
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by Dustination on September 30th 2014, 12:02 am

Yes, the images are located in the CSS code, near the bottom.

Dustination
Forumember

Posts : 29
Reputation : 1
Language : English

http://projectcrusade.forumotion.com/

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by Dustination on October 1st 2014, 4:28 am

So is this not possible to do?
Sorry if I sound impatient.

Dustination
Forumember

Posts : 29
Reputation : 1
Language : English

http://projectcrusade.forumotion.com/

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by SLGray on October 1st 2014, 5:07 am

I believe it is possible, but I do not know how.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41909
Reputation : 2881
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by Dustination on October 1st 2014, 11:06 pm

Ah, okay, I see. No worries.
If anybody else knows how it would be greatly appreciated if you could share your knowledge. Lol.

Dustination
Forumember

Posts : 29
Reputation : 1
Language : English

http://projectcrusade.forumotion.com/

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by _Twisted_Mods_ on October 7th 2014, 10:37 pm

<div onclick="location.href='http://www.yahoo.com/';" style="cursor: pointer;" id="s1">
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by Ange Tuteur on October 7th 2014, 10:50 pm

Hello Dustination,

In your homepage message you can wrap your slides :
Code:
<div id="s1"></div>

With anchor(link) elements :
So, clicking slide one will refer you to the forum.
Code:
<a href="/forum"><div id="s1"></div></a>

href="/forum" is where you want to link people. Replace /forum by any URL you want. Here is your homepage message with the links added :

All you need to do is replace /forum by the URLs you want for each slide.
Code:
<div id="one" class="accordion">
            
   <ol>
                  
      <li>
                          
         <h2>
              <span>2014 - 09 - 21</span>
         </h2>
                          
         <a href="/forum"><div id="s1">
              
         </div></a>
                      
      </li>
                  
      <li>
                          
         <h2>
              <span>2014 - 09 - 19</span>
         </h2>
                          
         <a href="/forum"><div id="s2">
              
         </div></a>
                      
      </li>
                  
      <li>
                          
         <h2>
              <span>2013 - 06 - 18</span>
         </h2>
                          
         <a href="/forum"><div id="s3">
              
         </div></a>
                      
      </li>
                  
      <li>
                          
         <h2>
              <span>2013 - 06 - 10</span>
         </h2>
                          
         <a href="/forum"><div id="s4">
              
         </div></a>
                      
      </li>
            
   </ol>
         <noscript>        <p>Please enable JavaScript to get the full experience.</p>    </noscript>
</div>
avatar
Ange Tuteur
Forumaster

Male Posts : 13187
Reputation : 2895
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by _Twisted_Mods_ on October 7th 2014, 10:55 pm

i tried the anchor way 1st but for some reason in the generality when i save it it messed the code all up
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by Ange Tuteur on October 8th 2014, 12:38 am

^^ Thanks for letting me know that, I checked and made a few changes.

Dustination,

Add this to your homepage message :

It's the same as before, all you need to do is replace /forum by the URL of your choice.
Code:
<div id="one" class="accordion">
            
   <ol>
                  
      <li>
                          
         <h2>
              <span>2014 - 09 - 21</span>
         </h2>
                          
         <a href="/forum" id="s1">
              
         </a>
                      
      </li>
                  
      <li>
                          
         <h2>
              <span>2014 - 09 - 19</span>
         </h2>
                          
         <a href="/forum" id="s2">
              
         </a>
                      
      </li>
                  
      <li>
                          
         <h2>
              <span>2013 - 06 - 18</span>
         </h2>
                          
         <a href="/forum" id="s3">
              
         </a>
                      
      </li>
                  
      <li>
                          
         <h2>
              <span>2013 - 06 - 10</span>
         </h2>
                          
         <a href="/forum" id="s4">
              
         </div>
                      
      </li>
            
   </ol>
         <noscript>        <p>Please enable JavaScript to get the full experience.</p>    </noscript>
</div>

and replace your CSS by :
Code:
   .accordion {
      text-align:left;
      font:'Helvetica Neue', Verdana, Arial, sans-serif;
    }
    .accordion ol {
      position: relative;
      overflow: hidden;
      height: 100%;
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    .accordion li > h2 {
      color: black;
      font-weight: normal;
      margin: 0;
      z-index: 2;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transform: translateX(-100%) rotate(-90deg);
      -webkit-transform-origin: right top;
      -moz-transform: translateX(-100%) rotate(-90deg);
      -moz-transform-origin: right top;
      -o-transform: translateX(-100%) rotate(-90deg);
      -o-transform-origin: right top;
      -ms-transform: translateX(-100%) rotate(-90deg);
      -ms-transform-origin: right top;
      transform: translateX(-100%) rotate(-90deg);
      transform-origin: right top;
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
    .accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; }
    .accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%9; left: 10%; left: 5%9; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
    .accordion li > h2:hover { cursor: pointer; }
    .accordion li > a { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; }
    .accordion noscript p { padding: 10px; margin: 0; background: white; }
    
    /****************************************** Basic */
    .basic li > h2 { background: #333; color: white; line-height: 1.8em; }
    .basic li > div h3 { margin: 15px 10px; }
    .basic li > div p { margin: 10px; font-size: 14px; }
    
    /****************************************** Dark */
    .dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
      box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
    .dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
    .dark li > h2 span { background: #353535; color: white; }
    .dark li > h2 b { background: #353535; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }
    .dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); }
    .dark h2.selected b { background: #434343; }
    .dark li > a { background: #030303; margin-left: 5px; }
    
    /*************************************** Rounded */
    .rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
    .rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
    
    /***************************************** Light */
    /**************************************** Stitch */

    #s1 {
     display:block;
     background:url("https://dl.dropboxusercontent.com/u/184353366/FORUM/news2andahalf.png") no-repeat #030303;
    }
    #s2 {
      display:block;
     background:url("https://dl.dropboxusercontent.com/u/184353366/FORUM/news2.png") no-repeat #030303;
    }
    #s3 {
      display:block;
     background:url("https://dl.dropboxusercontent.com/u/184353366/FORUM/news3.png") no-repeat #030303;
    }

    #s4 {
      display:block;
     background:url("https://dl.dropboxusercontent.com/u/184353366/FORUM/news4.png") no-repeat #030303;
    }

    #s5 {
      display:block;
     background:url("http://url de l'image.jpg") no-repeat #030303;
    }
avatar
Ange Tuteur
Forumaster

Male Posts : 13187
Reputation : 2895
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by Dustination on October 8th 2014, 2:30 am

Oh man. You are a lifesaver!
Thank you so much, you have no idea.

Both of you were huge helps. Smile

Thanks again!
Solved!

Dustination
Forumember

Posts : 29
Reputation : 1
Language : English

http://projectcrusade.forumotion.com/

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by Ange Tuteur on October 8th 2014, 5:27 am

You're welcome ^^

Topic archived

If you have anymore questions, you can let us know by creating a new topic. Smile
avatar
Ange Tuteur
Forumaster

Male Posts : 13187
Reputation : 2895
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum