The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Clickable image links in accordion?

4 posters

Go down

Solved Clickable image links in accordion?

Post by Dustination 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
avatar
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 September 29th 2014, 10:10 am

Please post the code you use.


Clickable image links in accordion? Slgray10

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

Male Posts : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by Dustination 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.
avatar
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 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]


Clickable image links in accordion? Slgray10

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

Male Posts : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by Dustination 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.
avatar
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 September 29th 2014, 7:21 pm

Have you added the images already?


Clickable image links in accordion? Slgray10

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

Male Posts : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Clickable image links in accordion?

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

Yes, the images are located in the CSS code, near the bottom.
avatar
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 October 1st 2014, 4:28 am

So is this not possible to do?
Sorry if I sound impatient.
avatar
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 October 1st 2014, 5:07 am

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


Clickable image links in accordion? Slgray10

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

Male Posts : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by Dustination 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.
avatar
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_ October 7th 2014, 10:37 pm

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

Male Posts : 2108
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by Ange Tuteur 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>
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by _Twisted_Mods_ 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
_Twisted_Mods_
_Twisted_Mods_
Helper
Helper

Male Posts : 2108
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by Ange Tuteur 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;
    }
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Clickable image links in accordion?

Post by Dustination 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!
avatar
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 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
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top


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